javascript写雪花飘飘的代码

你可以使用 HTML5 的 Canvas 元素和 JavaScript 来实现雪花飘飘的效果，以下是一个简单的实现代码：

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

<script>
  // 获取 Canvas 元素
  var canvas = document.getElementById('canvas');

  // 获取 Canvas 上下文
  var ctx = canvas.getContext('2d');

  // 设置 Canvas 大小
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  // 雪花数组
  var snowflakes = [];

  // 创建雪花对象
  function createSnowflake() {
    return {
      x: Math.random() * canvas.width,
      y: -10,
      radius: Math.random() * 4 + 1,
      speed: Math.random() * 3 + 1,
      angle: Math.random() * 360,
      opacity: Math.random()
    };
  }

  // 添加雪花到数组中
  for (var i = 0; i < 100; i++) {
    snowflakes.push(createSnowflake());
  }

  // 绘制雪花
  function drawSnowflake(snowflake) {
    ctx.beginPath();
    ctx.arc(snowflake.x, snowflake.y, snowflake.radius, 0, Math.PI * 2);
    ctx.fillStyle = 'rgba(255, 255, 255, ' + snowflake.opacity + ')';
    ctx.fill();
  }

  // 更新雪花位置
  function updateSnowflake(snowflake) {
    snowflake.x += Math.cos(snowflake.angle) * snowflake.speed;
    snowflake.y += Math.sin(snowflake.angle) * snowflake.speed;

    // 如果雪花超出屏幕范围，则重新生成
    if (snowflake.x > canvas.width + 5 ||
        snowflake.x < -5 ||
        snowflake.y > canvas.height) {
      var index = snowflakes.indexOf(snowflake);
      snowflakes.splice(index, 1);
      snowflakes.push(createSnowflake());
    }
  }

  // 循环绘制雪花
  function loop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < snowflakes.length; i++) {
      drawSnowflake(snowflakes[i]);
      updateSnowflake(snowflakes[i]);
    }

    requestAnimationFrame(loop);
  }

  // 开始循环绘制
  loop();
</script>

在上面的代码中，我们先创建了一个 Canvas 元素，并获取了它的上下文。然后，我们创建了一个雪花数组，用于存储雪花对象。接着，我们循环添加雪花到数组中，每个雪花都有随机的位置、大小、速度和透明度。然后，我们编写了 `drawSnowflake` 函数和 `updateSnowflake` 函数，用于绘制和更新雪花的状态。最后，我们使用 `requestAnimationFrame` 函数来不断地循环执行 `loop` 函数，以达到雪花飘飘的效果。