HTML5庆祝生日蛋糕烟花特效

最新推荐文章于 2025-05-21 11:47:26 发布

原创

最新推荐文章于 2025-05-21 11:47:26 发布 · 4.6k 阅读

标签

#html5 #javascript #前端

此代码示例展示了如何使用HTML5的Canvas元素和JavaScript创建一个生日蛋糕烟花动画。当页面加载或鼠标点击时，会在特定位置触发烟花效果。动画通过计算粒子运动轨迹和颜色变化来模拟逼真的烟花绽放过程。

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

最低0.47元/天解锁文章