新年礼花绽放，祝愿2024龙年来临！

前端

2023-09-14 09:38:32

使用 HTML5 和 JavaScript 创造一个壮观的新年礼花效果

准备好欢庆新年

兔年即将结束，龙年即将到来。在这个激动人心的时刻，让我们用 HTML5 和 JavaScript 创造一个令人惊叹的新年礼花效果，为这个美好的时刻增添喜庆。

准备工作：

文本编辑器（如记事本或 Notepad++）
Web 浏览器（如 Chrome 或 Firefox）
代码编辑器（如 Visual Studio Code 或 Atom）

让我们开始吧！

1. 创建一个 HTML 文件

创建一个新的 HTML 文件并将其命名为 index.html。在文件中输入以下代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script src="script.js"></script>
</body>
</html>

2. 创建一个 JavaScript 文件

创建一个新的 JavaScript 文件并将其命名为 script.js。在文件中输入以下代码：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var width = canvas.width;
var height = canvas.height;

var particles = [];

function createParticle() {
  var particle = {
    x: Math.random() * width,
    y: Math.random() * height,
    vx: Math.random() * 2 - 1,
    vy: Math.random() * 2 - 1,
    radius: Math.random() * 5 + 1,
    color: "rgba(" + Math.random() * 255 + "," + Math.random() * 255 + "," + Math.random() * 255 + ",1)"
  };
  particles.push(particle);
}

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

function updateParticle(particle) {
  particle.x += particle.vx;
  particle.y += particle.vy;

  if (particle.x < 0 || particle.x > width) {
    particle.vx = -particle.vx;
  }

  if (particle.y < 0 || particle.y > height) {
    particle.vy = -particle.vy;
  }
}

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

  for (var i = 0; i < particles.length; i++) {
    drawParticle(particles[i]);
    updateParticle(particles[i]);
  }

  requestAnimationFrame(draw);
}

createParticle();
draw();