HTML5庆祝生日蛋糕烟花特效-Toy模板网

这篇具有很好参考价值的文章主要介绍了HTML5庆祝生日蛋糕烟花特效。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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>