ts实现代码雨

最新推荐文章于 2024-10-02 17:15:49 发布

Mengxy灬

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量268

点赞数

文章标签： html typescript

本文链接：https://blog.csdn.net/qq_47548037/article/details/131022468

版权

该文展示了如何用TypeScript和HTML5的canvas元素创建一个代码雨的效果。通过获取canvas上下文，设置全屏，随机分布文字并使其下落，每帧更新位置，营造出代码从屏幕顶部向下飘落的视觉体验。示例代码来源于小满zs在哔哩哔哩的视频教程。

摘要由CSDN通过智能技术生成

跟着小满zs学习ts案例之代码雨

index.html

<!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>
    <style>
      * {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script src="./index.js"></script>
  </body>
</html>

index.ts

let canvas: HTMLCanvasElement = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
//设置全屏
canvas.width = screen.availWidth;
canvas.height = screen.availHeight;
// 代码雨显示文字
let str: string[] = "qwe321564asd".split("");
// 创建数组
let Arr = Array(Math.ceil(canvas.width / 10)).fill(0);

const rain = () => {
  ctx.fillStyle = "rgba(0,0,0,0.05)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#0f0";
  Arr.forEach((item, index) => {
    ctx.fillText(
      str[Math.floor(Math.random() * str.length)],
      index * 10,
      item + 10
    );
    Arr[index] =
      item > canvas.height || item > Math.random() * 15000 ? 0 : item + 10;
  });
};

setInterval(rain, 40);

小满zs哔站链接https://www.bilibili.com/video/BV1wR4y1377K?p=8&spm_id_from=pageDriver&vd_source=e3ebe1a99233fd3c3a9526e0c95a9fd7