用html+css+js生成一个放烟花的页面

最新推荐文章于 2024-07-29 16:48:07 发布

Clown爱电脑

最新推荐文章于 2024-07-29 16:48:07 发布

阅读量409

点赞数

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

本文链接：https://blog.csdn.net/weixin_42587866/article/details/129557488

版权

本文介绍了如何使用HTML构建页面结构，CSS设置样式，特别是用JavaScript和Canvas库创建动态的烟花动画效果。提供了一个简单的HTML和JS代码示例，展示了在用户点击时生成烟花粒子的效果。

摘要由CSDN通过智能技术生成

<p>要生成一个放烟花的页面，你需要使用HTML，CSS和JS。</p>
<p>HTML用来创建网页的结构，在这里可以创建一个容器来存放烟花的动画效果。</p>
<p>CSS用来设置网页的样式，比如背景颜色、字体、颜色等。</p>
<p>JS用来创建烟花的动画效果，可以通过使用JS库，例如Canvas或SVG，来实现这个效果。</p>
<p>以下是一个简单的HTML和JS代码示例：</p>
<p>```html
<!DOCTYPE html></p>
<html>
<head>
  <style>
    #fireworks {
      background-color: black;
      height: 100%;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="fireworks"></div>
  <script>
    const canvas = document.getElementById("fireworks");
    const ctx = canvas.getContext("2d");

<pre><code>let particles = [];

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i &lt; particles.length; i++) {
    const particle = particles[i];

    particle.update();

    ctx.beginPath();
    ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
    ctx.fillStyle = particle.color;
    ctx.fill();
  }

  requestAnimationFrame(draw);
}

class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.color = &quot;white&quot;;
    this.radius = Math.random() * 2 + 1;
    this.velocity = {
      x: Math.random() * 4 - 2,
      y: Math.random() * -5 - 5,
    };
  }

  update() {
    this.x += this.velocity.x;
    this.y += this.velocity.y;
    this.radius -= 0.01;

    if (this.radius &gt; 0) {
      particles.push(new Particle(this.x, this.y));
    }
  }
}

canvas.addEventListener(&quot;click&quot;, (e) =&gt; {
  particles.push(new Particle(e.clientX, e.clientY));
});

draw();
</code></pre>
<p>  </script></p>
</body>
</html