<p>可以使用HTML的<code>canvas</code>元素和JavaScript来创建3D烟花特效。下面是一个简单的例子:</p>
<p>```html
<!DOCTYPE html></p>
<html>
<head>
<title>3D烟花特效</title>
<style>
canvas {
background-color: black;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="fireworks"></canvas>
<script>
// 获取canvas元素
const canvas = document.getElementById('fireworks');
// 获取canvas的绘图上下文
const ctx = canvas.getContext('2d');
<pre><code>// 定义烟花类
class Firework {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.particles = [];
}
// 绘制烟花
draw() {
// 遍历所有烟花粒子并绘制
for (const particle of this.particles) {
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
}
}
// 更新烟花状态
update() {
// 遍历所有烟花粒子并更新其位置
for (const particle of this.particles) {
particle.x += particle.vx;
particle.y += particle.vy;
particle.vy += 0.1; // 重力
particle.radius *= 0.97; // 缩小粒子半径
}
}
}
// 定义动画循环函数
function animate() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 遍历所有烟花并更新和绘制
for (const firework of fireworks) {
firework.update();
firework.draw();
}
// 调用动画循环函数
requestAnimationFrame(animate);
}
// 定义烟花数组
const fireworks = [];
// 点击画布时生成一个新的烟花
canvas
</code></pre>
用HTML写一个好看的3D烟花特效
最新推荐文章于 2024-05-07 12:49:12 发布