超炫！用代码打造3D立体爱心粒子效果

以下是一个使用HTML5 Canvas和JavaScript创建的3D立体爱心粒子效果代码： ```html <!DOCTYPE html> <html> <head> <title>3D爱心粒子</title> <style> body { margin: 0; overflow: hidden; background: #000; } canvas { display: block; } </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; // 粒子数组 const particles = []; const particleCount = 1500; // 爱心形状参数 const heartSize = Math.min(canvas.width, canvas.height) * 0.3; // 创建粒子 class Particle { constructor() { // 随机位置在爱心形状内 const angle = Math.random() * Math.PI * 2; const r = Math.random() * heartSize; const x = r * 16 * Math.pow(Math.sin(angle), 3); const y = -r * (13 * Math.cos(angle) - 5 * Math.cos(2*angle) - 2 * Math.cos(3*angle) - Math.cos(4*angle)); this.x = x + canvas.width / 2; this.y = y + canvas.height / 2; this.z = Math.random() * heartSize - heartSize/2; this.size = Math.random() * 2 + 1; this.color = `hsl(${Math.random() * 60 + 330}, 100%, 50%)`; this.speedX = Math.random() * 0.2 - 0.1; this.speedY = Math.random() * 0.2 - 0.1; this.speedZ = Math.random() * 0.2 - 0.1; } update() { // 3D效果 - 透视 const scale = 1 / (1 + this.z * 0.001); // 更新位置 this.x += this.speedX; this.y += this.speedY; this.z += this.speedZ; // 边界检查 if (this.z > heartSize/2 || this.z < -heartSize/2) { this.speedZ *= -1; } // 绘制粒子 ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc( this.x, this.y, this.size * scale, 0, Math.PI * 2 ); ctx.fill(); } } // 初始化粒子 for (let i = 0; i < particleCount; i++) { particles.push(new Particle()); } // 动画循环 function animate() { ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height); particles.forEach(particle => particle.update()); requestAnimationFrame(animate); } animate(); // 窗口大小调整 window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); </script> </body> </html> ``` 代码说明： 1. 使用爱心参数方程创建3D爱心形状 2. 每个粒子在3D空间中有x,y,z坐标 3. 通过透视缩放实现3D效果 4. 粒子在爱心范围内随机运动 5. 使用HSL色彩空间实现多彩效果注意事项： 1. 粒子数量(particleCount)可以根据设备性能调整 2. 爱心大小(heartSize)与窗口大小相关 3. 颜色范围(hsl)可以修改以获得不同色调效果 ######[AI写代码神器 | 885点数解答 | 2025-07-23 19:27:45]

服务商

更多选项

快捷项

自定义