分享canvas绘制流星雨代码

攻克难点

于 2023-03-24 09:28:52 发布

阅读量198

点赞数

分类专栏： h5文字文章标签： html5 css javascript Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_41652495/article/details/129744082

版权

h5文字专栏收录该内容

2 篇文章 0 订阅

订阅专栏

感觉很酷炫，直接上图上码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body style="padding: 0; margin: 0; height: 100%; overflow: hidden">
    <canvas id="canvas"></canvas>
    <script>
      const canvas = document.getElementById("canvas");
      canvas.width = screen.availWidth;
      canvas.height = screen.availHeight;
      const ctx = canvas.getContext("2d");
      let str = "0101101100";
      const arr = Array(Math.ceil(canvas.width / 10)).fill(0);
      const rain = () => {
        ctx.fillStyle = "rgb(0, 0, 0, 0.05)";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        arr.forEach((item, index) => {
          ctx.fillStyle = "#0f0";
          ctx.fillText(
            str[Math.floor(Math.random() * str.length)],
            index * 10,
            item + 10
          );
          // arr[index] = item + 10 > canvas.height ? 0 : item + 10;
          arr[index] = item + 10 > 10000 * Math.random() ? 0 : item + 10;
        });
      };
      rain();
      setInterval(rain, 40);
    </script>
  </body>
</html>