2024 新年HTML5+Canvas制作3D烟花特效

这篇文章距离上次修改已过185天，其中的内容可能已经有所变动。

以下是一个简化的代码示例，展示了如何使用HTML5和Canvas创建一个简单的3D烟花特效：




<!DOCTYPE html>
<html>
<head>
    <title>3D烟花特效</title>
    <script>
        // 初始化Canvas和相关属性
        function init() {
            var canvas = document.getElementById('fireworks-canvas');
            var ctx = canvas.getContext('2d');
 
            // 控制烟花的发射位置和数量
            var fireworks = [];
            for (var i = 0; i < 50; i++) {
                fireworks.push(new Firework(canvas, ctx));
            }
 
            // 运行烟花发射逻辑
            setInterval(function() {
                ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
 
                fireworks.forEach(function(firework, index) {
                    firework.update();
 
                    // 如果烟花完成，从数组中移除
                    if (firework.complete) {
                        fireworks.splice(index, 1);
                    }
                });
 
                // 定期添加新的烟花
                if (Math.random() > 0.7) {
                    fireworks.push(new Firework(canvas, ctx));
                }
            }, 1000 / 60);
        }
 
        // 烟花类定义
        function Firework(canvas, ctx) {
            this.canvas = canvas;
            this.ctx = ctx;
            this.complete = false;
            this.exploded = false;
            this.x = Math.random() * canvas.width;
            this.y = canvas.height * 0.8;
            this.vx = Math.random() * 6 - 3;
            this.vy = -15;
            this.radius = 2;
            this.color = 'hsl(' + Math.random() * 360 + ', 100%, 50%)';
            this.explosionRadius = 100;
            this.explosionColor = 'hsl(' + Math.random() * 360 + ', 100%, 50%)';
        }
 
        Firework.prototype.update = function() {
            if (!this.exploded) {
                this.vy += 0.3;
                this.x += this.vx;
                this.y += this.vy;
 
                if (this.y >= this.canvas.height) {
                    this.exploded = true;
                }
            } else {
                this.radius += 2;
                this.color = 'rgba(255, 255, 255, 0.5)';
 
                if (this.radius >= this.explosionRadius) {
                    this.complete = true;
                }
            }
        };
 
        Firework.prototype.draw = function() {
            if (!this.exploded) {
                this.ctx.beginPath(

2024 新年HTML5+Canvas制作3D烟花特效

评论已关闭

推荐阅读