用 HTML 实现超炫 3D 旋转粒子爱心，代码详解与参数调整秘籍！

以下是一个使用 HTML、CSS 和 JavaScript 实现 3D 旋转粒子爱心的代码示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D Rotating Particle Heart</title> <style> /* 设置画布样式 */ body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #000; overflow: hidden; } canvas { display: block; } </style> </head> <body> <canvas id="canvas"></canvas> <script> // 获取画布元素 const canvas = document.getElementById('canvas'); // 获取 2D 绘图上下文 const ctx = canvas.getContext('2d'); // 设置画布宽度和高度为窗口的宽度和高度 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 定义粒子数量 const particleCount = 500; // 存储粒子的数组 const particles = []; // 定义粒子类 class Particle { constructor() { // 生成随机的角度 const angle = Math.random() * 2 * Math.PI; // 根据爱心曲线公式计算爱心上的点的坐标 const t = angle; const x = 16 * Math.pow(Math.sin(t), 3); const y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t); // 缩放爱心的大小 const scale = 10; // 计算粒子的初始位置 this.x = x * scale + canvas.width / 2; this.y = -y * scale + canvas.height / 2; // 粒子的速度 this.vx = (Math.random() - 0.5) * 2; this.vy = (Math.random() - 0.5) * 2; // 粒子的颜色 this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; // 粒子的透明度 this.alpha = 1; } // 更新粒子的位置和透明度 update() { this.x += this.vx; this.y += this.vy; this.alpha -= 0.005; } // 绘制粒子 draw() { ctx.beginPath(); ctx.arc(this.x, this.y, 2, 0, Math.PI * 2); ctx.fillStyle = `rgba(${parseInt(this.color.slice(4, -1).split(',')[0])}, ${parseInt(this.color.slice(4, -1).split(',')[1])}, ${parseInt(this.color.slice(4, -1).split(',')[2])}, ${this.alpha})`; ctx.fill(); } } // 初始化粒子数组 for (let i = 0; i < particleCount; i++) { particles.push(new Particle()); } // 旋转角度 let rotation = 0; // 动画循环函数 function animate() { // 清除画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 保存当前的绘图状态 ctx.save(); // 将画布的原点移动到画布中心 ctx.translate(canvas.width / 2, canvas.height / 2); // 旋转画布 ctx.rotate(rotation); // 将画布的原点移回左上角 ctx.translate(-canvas.width / 2, -canvas.height / 2); // 更新和绘制每个粒子 for (let i = 0; i < particles.length; i++) { const particle = particles[i]; particle.update(); particle.draw(); // 如果粒子的透明度小于等于 0，重新生成该粒子 if (particle.alpha <= 0) { particles[i] = new Particle(); } } // 增加旋转角度 rotation += 0.002; // 请求下一帧动画 requestAnimationFrame(animate); } // 开始动画 animate(); // 监听窗口大小变化事件，更新画布大小 window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); </script> </body> </html> ``` 代码解释： 1. HTML 部分：创建一个 `canvas` 元素，用于绘制 3D 旋转粒子爱心。 2. CSS 部分：设置 `body` 和 `canvas` 的样式，使 `canvas` 居中显示，并设置颜色为黑色。 3. JavaScript 部分： - 获取 `canvas` 元素和 2D 绘图上下文，并设置 `canvas` 的宽度和高度为窗口的宽度和高度。 - 定义粒子类 `Particle`，在构造函数中根据爱心曲线公式计算粒子的初始位置，同时设置粒子的速度、颜色和透明度。 - 初始化粒子数组，存储所有的粒子。 - 定义动画循环函数 `animate`，在该函数中清除画布，旋转画布，更新和绘制每个粒子，并请求下一帧动画。 - 监听窗口大小变化事件，更新 `canvas` 的大小。额外注意的逻辑点： 1. 爱心的大小可以通过调整 `scale` 参数来改变，如果想要更大或更小的爱心，可以修改该值。 2. 粒子的数量可以通过修改 `particleCount` 变量来调整，数量越多，爱心看起来越密集，但可能会影响性能。 3. 旋转的速度可以通过修改 `rotation` 的增量值来调整，例如将 `rotation += 0.002;` 中的 `0.002` 增大或减小。 ######[AI写代码神器 | 1438点数解答 | 2025-07-05 10:16:32]

服务商

更多选项

快捷项

自定义