使用 HTML5 和 JS 创建下雪效果

在这篇文章中，我们将介绍如何使用 HTML5 和 JavaScript 来创建一个下雪的视觉效果。我们将从头开始构建这个项目，并提供代码示例和指导，以帮助读者学习和理解。

准备工作

在开始之前，我们需要准备一些基本东西：

• 一个空的 HTML 文件
• 一个 CSS 文件
• 一个 JavaScript 文件

将这些文件都放在同一个目录下，并在 HTML 文件中链接它们。

实现过程

第一步：创建画布

我们将使用 HTML5 的 canvas 元素来创建我们的下雪效果。首先，在 HTML 文件中添加以下标记：

<canvas id="canvas"></canvas>

然后，在 CSS 文件中，设置画布的大小和背景颜色：

#canvas {
  background-color: #000;
  width: 100vw;
  height: 100vh;
}

接下来，在 JavaScript 文件中获取画布元素并创建一个 2D 上下文对象：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

第二步：创建雪花对象

接下来，我们需要创建表示雪花的对象。每朵雪花都应该有一个 x 和 y 坐标，以及一个速度属性来控制它们下落的速度。

class Snowflake {
  constructor() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * -canvas.height;
    this.speed = 1 + Math.random() * 3;
  }
}

第三步：绘制雪花

现在我们已经有了表示雪花的对象，接下来需要将它们绘制到画布上。我们将使用 draw() 方法来更新每朵雪花的位置和渲染到画布上。

Snowflake.prototype.draw = function() {
  ctx.beginPath();
  ctx.arc(this.x, this.y, 4, 0, 2 * Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
};

第四步：让雪花动起来

现在我们可以让每朵雪花向下移动一定的距离，并使它们受到重力的影响。我们将使用 update() 方法来更新每个雪花的位置。

Snowflake.prototype.update = function() {
  this.y += this.speed;
  if (this.y > canvas.height) {
    this.y = -10;
    this.x = Math.random() * canvas.width;
  }
};

第五步：创建多个雪花

现在我们已经有了一个雪花对象，并且能够在画布上将其绘制并移动。但是，单个雪花显然不会产生出众的下雪效果。为了让下雪更加逼真，我们需要创建多个雪花对象并让它们同时在屏幕上移动。

-- -------------------- ---- -------
----- ---------- - ---

--- ---- - - -- - - ---- ---- -
  ------------------- -------------
-

-------- --------- -
  ---------------- -- ------------- ---------------
  --- ---- - - -- - - ------------------ ---- -
    ---------------------
    -----------------------
  -
  -------------------------------
-

----------

在这段代码中，我们首先创建了 100 个雪花对象，并将它们存储在数组 snowflakes 中。然后，我们使用 requestAnimationFrame() 方法来重复绘制画布并更新每个雪花的位置。最后，我们调用 animate() 函数以启动动画。

完整代码

<canvas id="canvas"></canvas>

#canvas {
  background-color: #000;
  width: 100vw;

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/27451) ，转载请注明来源
[https://www.javascriptcn.com/post/27451](https://www.javascriptcn.com/post/27451)