用HTML写一个好看的3D烟花特效

最新推荐文章于 2023-06-03 01:26:19 发布

Msura

最新推荐文章于 2023-06-03 01:26:19 发布

阅读量254

点赞数

文章标签： html 3d javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_35755562/article/details/129504875

版权

<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>

Msura

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用HTML写一个好看的3D烟花特效

<p>可以使用HTML的<code>canvas</code>元素和JavaScript来创建3D烟花特效。下面是一个简单的例子：</p><p>```html<!DOCTYPE html></p><html><head> <title>3D烟花特效</title...
复制链接

扫一扫