JavaScript实现雪花飘落效果特效

现代网站逐渐趋向于美化效果和视觉体验的提高，雪花飘落效果是一种常见的动态效果，可以为网站增添一份冬日的氛围。本文将详细介绍如何通过 JavaScript 实现雪花飘落效果特效的方法。

准备工作

在开始编写代码之前，我们需要先在网页中引入一个 HTML canvas 元素,它将作为我们绘制雪花的画布。添加 HTML 代码如下：

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

然后需要为该 canvas 元素设置一些基本的样式，如宽度和高度等等，该样式将数据保存在一个 CSS 中，并通过 JavaScript 代码获取该元素的宽度和高度。

#canvas{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
}

然后在 JavaScript 代码中新增一个变量来保存 canvas 元素，并获取元素设置的宽度和高度

let canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let width = canvas.width;
let height = canvas.height;

绘制雪花

在绘制雪花之前，我们需要先了解一下 canvas 的绘图 API。具体来说，canvas 绘图 API 主要有以下 3 个部分：

Path（路径）：路径是由一系列的线段和曲线构成的，路径可以用来绘制形状和线条。
Stroke（描边）：描边就是给路径添加边框。
Fill（填充）：填充就是给路径内部添加颜色。

这里我们需要使用到 Path 来绘制雪花。

下面是一个绘制单个雪花的示例代码。

function drawSnowflake(x, y, r, color = '#fff') {
  // 创建一个新路径
  ctx.beginPath();

  // 创建 6 条从中心引出的线条
  for (let i = 0; i < 6; i++) {
    let dx = r * Math.cos((2 * i + 1) * Math.PI / 12);
    let dy = r * Math.sin((2 * i + 1) * Math.PI / 12);
    ctx.moveTo(x, y);
    ctx.lineTo(x + dx, y + dy);
  }

  // 设置绘制样式
  ctx.lineWidth = r / 4;
  ctx.strokeStyle = color;
  ctx.stroke();

  // 关闭路径
  ctx.closePath();
}

这段代码中，我们通过循环创建了 6 条从中心引出的线条，并使用 lineTo 方法将这些线条连接起来，从而绘制了一个六边形。通过设置边框样式可以改变雪花的颜色和大小。

控制雪花飘落

我们需要在 canvas 中添加许多雪花，并使这些雪花随机飘落。在创建雪花的同时，我们需要设置几个属性：位置、半径、飘落速度和飘落方向。

下面是我们如何在 canvas 中添加雪花的示例代码。

// 确定雪花数量
let flakesCount = 100;
let flakes = [];

// 循环创建雪花
for (let i = 0; i < flakesCount; i++) {
  let x = Math.random() * width;
  let y = Math.random() * height;
  let r = Math.random() * 6 + 2;

  let dx = Math.random() * 2 - 1;
  let dy = Math.random() * 2 + 1;

  flakes.push({ x, y, r, dx, dy });
}

// 帧动画
function drawFrame() {
  // 清空画布
  ctx.clearRect(0, 0, width, height);
  flakes.forEach((flake) => {
    // 更新雪花位置
    flake.x += flake.dx;
    flake.y += flake.dy;

    // 重新定位飘出画布的雪花
    if (flake.x < -flake.r || flake.x > width + flake.r || flake.y > height + flake.r) {
      flake.x = Math.random() * width;
      flake.y = -flake.r;
    }

    // 绘制雪花
    drawSnowflake(flake.x, flake.y, flake.r);
  });

  // 循环动画
  requestAnimationFrame(drawFrame);
}

// 开始渲染页面
drawFrame();

这段代码中，我们首先对雪花的初始位置、半径和飘落速度等进行了随机化。我们还为每个雪花创建了一个由 dx 和 dy 组成的速度向量，用来确定雪花飘落方向和速度。

接下来的 drawFrame 函数用于每一帧重新绘制所有雪花的位置，并更新移动的方向，当雪花飘出 canvas 边界时，重新随机分配位置，从而形成连续的雪花飘落效果。通过不断的循环这个过程，我们就可以看到雪花持续地飘落了。

示例说明

下面是两个使用雪花飘落效果的具体示例：

示例 1

我们可以将上述的实现代码嵌入到一个网页中，然后通过设置全屏松鼠游戏背景效果。

<style>
  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  canvas {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: -1;
  }
</style>
<body>
  <canvas id="canvas"></canvas>

  <div>松鼠游戏页面</div>

  <script>
    let canvas = document.getElementById('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    let ctx = canvas.getContext('2d');

    function drawSnowflake(x, y, r, color = '#fff') {
      // 创建一个新路径
      ctx.beginPath();

      // 创建 6 条从中心引出的线条
      for (let i = 0; i < 6; i++) {
        let dx = r * Math.cos((2 * i + 1) * Math.PI / 12);
        let dy = r * Math.sin((2 * i + 1) * Math.PI / 12);
        ctx.moveTo(x, y);
        ctx.lineTo(x + dx, y + dy);
      }

      // 设置绘制样式
      ctx.lineWidth = r / 4;
      ctx.strokeStyle = color;
      ctx.stroke();

      // 关闭路径
      ctx.closePath();
    }

    let width = canvas.width;
    let height = canvas.height;
    let flakesCount = 200;
    let flakes = [];

    // 循环创建雪花
    for (let i = 0; i < flakesCount; i++) {
      let x = Math.random() * width;
      let y = Math.random() * height;
      let r = Math.random() * 6 + 2;

      let dx = Math.random() * 2 - 1;
      let dy = Math.random() * 2 + 1;

      flakes.push({ x, y, r, dx, dy });
    }

    // 帧动画
    function drawFrame() {
      // 清空画布
      ctx.clearRect(0, 0, width, height);
      flakes.forEach((flake) => {
        // 更新雪花位置
        flake.x += flake.dx;
        flake.y += flake.dy;

        // 重新定位飘出画布的雪花
        if (flake.x < -flake.r || flake.x > width + flake.r || flake.y > height + flake.r) {
          flake.x = Math.random() * width;
          flake.y = -flake.r;
        }

        // 绘制雪花
        drawSnowflake(flake.x, flake.y, flake.r);
      });

      // 循环动画
      requestAnimationFrame(drawFrame);
    }

    // 开始渲染页面
    drawFrame();
  </script>
</body>

该示例实现了一个具有多个雪花飘落效果的全屏松鼠游戏背景，即当用户访问该页面时，即可看到众多雪花在背景中缓慢飘动，使页面画面增添了一份节日气氛。

示例 2

另一个示例是将雪花飘落效果应用到一个简单的五子棋页面中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>五子棋游戏</title>
</head>
<body>
  <canvas id="canvas"></canvas>

  <script>
    let canvas = document.getElementById('canvas');
    canvas.width = 400;
    canvas.height = 400;

    let ctx = canvas.getContext('2d');

    function drawSnowflake(x, y, r, color = '#fff') {
      // 创建一个新路径
      ctx.beginPath();

      // 创建 6 条从中心引出的线条
      for (let i = 0; i < 6; i++) {
        let dx = r * Math.cos((2 * i + 1) * Math.PI / 12);
        let dy = r * Math.sin((2 * i + 1) * Math.PI / 12);
        ctx.moveTo(x, y);
        ctx.lineTo(x + dx, y + dy);
      }

      // 设置绘制样式
      ctx.lineWidth = r / 4;
      ctx.strokeStyle = color;
      ctx.stroke();

      // 关闭路径
      ctx.closePath();
    }

    let width = canvas.width;
    let height = canvas.height;
    let flakesCount = 50;
    let flakes = [];

    // 循环创建雪花
    for (let i = 0; i < flakesCount; i++) {
      let x = Math.random() * width;
      let y = Math.random() * height;
      let r = Math.random() * 4 + 2;

      let dx = Math.random() * 2 - 1;
      let dy = Math.random() * 2 + 1;

      flakes.push({ x, y, r, dx, dy });
    }

    // 帧动画
    function drawFrame() {
      // 清空画布
      ctx.clearRect(0, 0, width, height);
      flakes.forEach((flake) => {
        // 更新雪花位置
        flake.x += flake.dx;
        flake.y += flake.dy;

        // 重新定位飘出画布的雪花
        if (flake.x < -flake.r || flake.x > width + flake.r || flake.y > height + flake.r) {
          flake.x = Math.random() * width;
          flake.y = -flake.r;
        }

        // 绘制雪花
        drawSnowflake(flake.x, flake.y, flake.r);
      });
      // 绘制五子棋棋盘
      // ...
      // 循环动画
      requestAnimationFrame(drawFrame);
    }

    // 开始渲染页面
    drawFrame();
  </script>
</body>
</html>

在五子棋页面中增加雪花飘落效果，在绘制五子棋棋盘的同时，还可以同时飘落众多雪片，为页面增添灵动的效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现雪花飘落效果特效 - Python技术站