Canvas还能画天气？魔法还是技术？

2024-02-17 13:29:05

这段时间一直在研究自定义View，恰好看到使用CSS实现的天气效果很不错，遂尝试使用自定义View实现一发。晴空一鹤排云上，便引诗情到碧霄。由于不可抗力原因（懒）,这里只实现了晴、雪两种天气效果。原作者文章里实现了晴、雪、云、雨、超级月亮？(原文Supermoon,本人水平有限不翻译了)。话不多说，我们先来看一下实现效果。

代码并不复杂，重点在CSS和JavaScript，关键部分已注释，有兴趣的可以自行研究。先贴上代码，后解释原理。

<!DOCTYPE html>
<html>
<head>
  
  <style>
    body {
      background-color: #000;
    }

    canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

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

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

    // 创建渐变色
    var gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
    gradient.addColorStop(0, "#000");
    gradient.addColorStop(1, "#fff");

    // 绘制背景
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 创建雪花
    var snowflakes = [];
    for (var i = 0; i < 100; i++) {
      snowflakes.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        r: Math.random() * 5 + 1, // 雪花大小
        v: Math.random() * 2 + 1 // 雪花下降速度
      });
    }

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

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

        // 绘制雪花
        ctx.beginPath();
        ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2);
        ctx.fillStyle = "#fff";
        ctx.fill();

        // 更新雪花位置
        snowflake.y += snowflake.v;

        // 如果雪花超出画布范围，则重新设置其位置
        if (snowflake.y > canvas.height) {
          snowflake.y = 0;
        }
      }

      // 请求动画帧
      requestAnimationFrame(drawSnowflakes);
    }

    // 开始绘制雪花
    drawSnowflakes();
  </script>
</body>
</html>