HTML5庆祝生日蛋糕烟花特效
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>HTML5 Birthday Cake Fireworks</title> <style> canvas { position: absolute; top: 0; left: 0; z-index: -1; } </style></head><body> <canvas id="fireworks"></canvas> <script> // 烟花特效 (function () { var canvas = document.getElementById('fireworks'), ctx = canvas.getContext('2d'), fireworks = [], particles = [], hue = 120, limiterTotal = 5, limiterTick = 0, timerTotal = 80, timerTick = 0, mousedown = false, mx, my; canvas.width = window.innerWidth; canvas.height = window.innerHeight; function random(min, max) { return Math.random() * (max - min) + min; } function calculateDistance(p1x, p1y, p2x, p2y) { var xDistance = p1x - p2x, yDistance = p1y - p2y; return Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 2)); } function Firework(sx, sy, tx, ty) { this.x = sx; this.y = sy; this.sx = sx; this.sy = sy; this.tx = tx; this.ty = ty; this.distanceToTarget = calculateDistance(sx, sy, tx, ty); this.distanceTraveled = 0; this.coordinates = []; this.coordinateCount = 3; while (this.coordinateCount--) { this.coordinates.push([this.x, this.y]); } this.angle = Math.atan2(ty - sy, tx - sx); this.speed = 2; this.acceleration = 1.05; this.brightness = random(50, 70); this.targetRadius = 1; } Firework.prototype.update = function (index) { this.coordinates.pop(); this.coordinates.unshift([this.x, this.y]); if (this.targetRadius < 8) { this.targetRadius += 0.3; } else { this.targetRadius = 1; } this.speed *= this.acceleration; var vx = Math.cos(this.angle) * this.speed, vy = Math.sin(this.angle) * this.speed; this.distanceTraveled = calculateDistance(this.sx, this.sy, this.x + vx, this.y + vy); if (this.distanceTraveled >= this.distanceToTarget) { createParticles(this.tx, this.ty); fireworks.splice(index, 1); } else { this.x += vx; this.y += vy; } } Firework.prototype.draw = function () { ctx.beginPath(); ctx.moveTo(this.coordinates[this.coordinates.length - 1][0], this.coordinates[this.coordinates.length - 1][1]); ctx.lineTo(this.x, this.y); ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)'; ctx.stroke(); ctx.beginPath(); ctx.arc(this.tx, this.ty, this.targetRadius, 0, Math.PI * 2); ctx.stroke(); } function createParticles(x, y) { var particleCount = 30; while (particleCount--) { particles.push(new Particle(x, y)); } } function Particle(x, y) { this.x = x; this.y = y; this.coordinates = []; this.coordinateCount = 5; while (this.coordinateCount--) { this.coordinates.push([this.x, this.y]); } this.angle = random(0, Math.PI * 2); this.speed = random(1, 10); this.friction = 0.95; this.gravity = 1; this.hue = random(hue - 20, hue + 20); this.brightness = random(50, 80); this.alpha = 1; this.decay = random(0.015, 0.03); } Particle.prototype.update = function (index) { this.coordinates.pop(); this.coordinates.unshift([this.x, this.y]); this.speed *= this.friction; this.x += Math.cos(this.angle) * this.speed; this.y += Math.sin(this.angle) * this.speed + this.gravity; this.alpha -= this.decay; if (this.alpha <= this.decay) { particles.splice(index, 1); } } Particle.prototype.draw = function () { ctx.beginPath(); ctx.moveTo(this.coordinates[this.coordinates.length - 1][0], this.coordinates[this.coordinates.length - 1][1]); ctx.lineTo(this.x, this.y); ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')'; ctx.stroke(); } function loop() { ctx.globalCompositeOperation = 'destination-out'; ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.globalCompositeOperation = 'lighter'; var i = fireworks.length; while (i--) { fireworks[i].draw(); fireworks[i].update(i); } var i = particles.length; while (i--) { particles[i].draw(); particles[i].update(i); } if (timerTick >= timerTotal) { if (!mousedown) { fireworks.push(new Firework(canvas.width / 2, canvas.height, random(0, canvas.width), random(0, canvas.height / 2))); timerTick = 0; } } else { timerTick++; } if (limiterTick >= limiterTotal) { if (mousedown) { fireworks.push(new Firework(canvas.width / 2, canvas.height, mx, my)); limiterTick = 0; } } else { limiterTick++; } requestAnimationFrame(loop); } window.onload = function () { canvas.addEventListener('mousemove', function (e) { mx = e.pageX - canvas.offsetLeft; my = e.pageY - canvas.offsetTop; }); canvas.addEventListener('mousedown', function (e) { e.preventDefault(); mousedown = true; }); canvas.addEventListener('mouseup', function (e) { e.preventDefault(); mousedown = false; }); loop(); }; })(); </script></body></html>以上代码使用HTML5的元素和JavaScript实现了一个简单的生日蛋糕烟花特效。在页面加载完成后，会自动启动动画，当鼠标点击页面时，会在鼠标位置发射一个烟花。
效果展示
