手把手教你用 HTML 实现超炫动态粒子爱心代码及避坑指南

以下是一个使用 HTML、CSS 和 JavaScript 实现动态粒子爱心效果的示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic Particle Heart</title> <style> /* 设置画布样式，使其覆盖整个页面 */ canvas { display: block; background: #000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; } </style> </head> <body>  <canvas id="canvas"></canvas> <script> // 获取画布元素和其绘图上下文 const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // 设置画布大小为窗口大小 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 粒子类，用于创建和管理粒子 class Particle { constructor(x, y) { // 粒子的初始 x 坐标 this.x = x; // 粒子的初始 y 坐标 this.y = y; // 粒子的速度，随机生成 this.vx = (Math.random() - 0.5) * 5; this.vy = (Math.random() - 0.5) * 5; // 粒子的大小，随机生成 this.size = Math.random() * 2 + 1; // 粒子的透明度，随机生成 this.alpha = 1; } // 更新粒子的位置和透明度 update() { this.x += this.vx; this.y += this.vy; this.alpha -= 0.01; } // 绘制粒子 draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fillStyle = `rgba(255, 0, 0, ${this.alpha})`; ctx.fill(); } } // 粒子数组，用于存储所有粒子 const particles = []; // 生成爱心形状的粒子 function generateHeartParticles() { for (let t = 0; t < 2 * Math.PI; t += 0.01) { // 根据爱心的参数方程计算 x 坐标 const x = 16 * Math.pow(Math.sin(t), 3); // 根据爱心的参数方程计算 y 坐标 const y = -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)); // 将坐标转换为画布上的实际位置 const canvasX = canvas.width / 2 + x * 10; const canvasY = canvas.height / 2 + y * 10; // 创建一个新的粒子并添加到粒子数组中 particles.push(new Particle(canvasX, canvasY)); } } // 动画循环函数，用于更新和绘制所有粒子 function animate() { // 清除画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 过滤掉透明度小于 0 的粒子 for (let i = particles.length - 1; i >= 0; i--) { const particle = particles[i]; particle.update(); particle.draw(); if (particle.alpha <= 0) { particles.splice(i, 1); } } // 每隔一段时间生成新的爱心粒子 if (Math.random() < 0.02) { generateHeartParticles(); } // 请求下一帧动画 requestAnimationFrame(animate); } // 开始动画 animate(); </script> </body> </html> ``` 我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 粒子的速度和大小随机生成时，要注意控制范围，避免粒子运动过快或过大影响效果。 2. 动画循环中清除画布时，要确保清除的范围是整个画布，否则会出现残留的粒子。 3. 处理粒子数组时，要注意数组的长度变化，避免在循环中删除元素导致数组索引混乱。 ######[AI写代码神器 | 1059点数解答 | 2025-11-09 20:08:04]

服务商

更多选项

快捷项

自定义