画好网页“下雪”无需插件，就这么简单！

为你的网页添上冬日气息，打造下雪背景特效

去年圣诞节，产品团队的一个活动中提出了要在网页背景下“雪花纷飞”的需求，这激发了我在 Canvas 上下雪背景动画方面的一些思考，希望能以此抛砖引玉，欢迎大家的评论。

整个项目已上传至 GitHub，欢迎大家 clone 代码到本地运行，并给个 star 支持。

雪花绘制

首先需要画出雪花。我使用了如下函数：

function drawSnow(ctx, x, y, radius, points, fillColor, borderColor) {
  ctx.beginPath();
  ctx.moveTo(x, y);
  for (let i = 0; i < points; i++) {
    let angle = (2 * Math.PI / points) * i;
    let newX = x + radius * Math.cos(angle);
    let newY = y + radius * Math.sin(angle);
    ctx.lineTo(newX, newY);
  }
  ctx.closePath();
  ctx.fillStyle = fillColor;
  ctx.fill();
  ctx.strokeStyle = borderColor;
  ctx.stroke();
}

这个函数的作用是绘制一个雪花，传入参数包括：

• ctx: Canvas 绘图上下文
• x、y: 雪花中心点坐标
• radius: 雪花半径
• points: 雪花花瓣数
• fillColor: 雪花填充颜色
• borderColor: 雪花边框颜色

然后，需要创建一个 JavaScript 函数来管理雪花的绘制和动画：

function startSnow(canvas) {
  let ctx = canvas.getContext("2d");
  let snowflakes = [];
  let numSnowflakes = 100;

  function createSnowflake() {
    let x = Math.random() * canvas.width;
    let y = -10;
    let radius = Math.random() * 5 + 5;
    let points = Math.floor(Math.random() * 6) + 3;
    let fillColor = "#FFFFFF";
    let borderColor = "#FFFFFF";
    return { x, y, radius, points, fillColor, borderColor };
  }

  for (let i = 0; i < numSnowflakes; i++) {
    snowflakes.push(createSnowflake());
  }

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

    snowflakes.forEach((snowflake) => {
      snowflake.y += 2;
      if (snowflake.y > canvas.height) {
        snowflake.y = -10;
      }
      drawSnow(
        ctx,
        snowflake.x,
        snowflake.y,
        snowflake.radius,
        snowflake.points,
        snowflake.fillColor,
        snowflake.borderColor
      );
    });

    requestAnimationFrame(drawSnowflakes);
  }

  drawSnowflakes();
}

这个函数的作用是：

• 创建一个画布并获取其上下文
• 创建一个雪花数组
• 使用 createSnowflake() 函数随机生成雪花
• 将雪花添加到数组中
• 使用 drawSnowflakes() 函数循环绘制雪花
• 使用 requestAnimationFrame() 函数不断调用 drawSnowflakes() 函数，实现动画效果

最后，在 HTML 页面中加入如下代码即可：

<canvas id="canvas" width="800" height="600"></canvas>

const canvas = document.getElementById("canvas");
startSnow(canvas);

性能优化

在实现雪花的绘制和动画后，需要考虑性能优化，以避免对用户体验造成影响。

首先，可以减少雪花的数量。雪花的数量过多会导致浏览器难以处理，从而导致动画效果卡顿。

其次，可以减少雪花的复杂度。雪花的复杂度越高，浏览器渲染起来就越困难。可以减少雪花的细节，如花瓣数量等，以提高性能。

第三，可以使用 requestAnimationFrame 代替 setInterval 来调用动画函数。requestAnimationFrame 会在浏览器每次重绘之前调用动画函数，这可以减少动画函数的调用频率，从而提高性能。

总结

本篇文章从实现雪花的绘制，到优化浏览器的性能，从而打造出高效、流畅的“下雪”效果。通过一系列巧妙的技巧，不仅能为你的网页带来冬日氛围，更能避免对用户体验造成影响。无论你是初学者还是经验丰富的开发者，都可以在本文中找到有价值的信息。

最后，希望本文能激发大家的灵感，在前端开发中不断探索和创新，打造出更酷炫、更有趣的网页特效。