2024 新年HTML5+Canvas制作3D烟花特效
以下是一个简化的代码示例，展示了如何使用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(
评论已关闭