代码雨通过画板显示数组的循环遍历，高度的随机改变来实现，看着比较好玩，所以记录一下哈哈哈

新建index.html，引用index.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 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[] = "SOIQWEHKLAFA".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) =>{
         //随机获取字符，每个文字设置10个像素，高度+10
        ctx.fillText(str[Math.floor(Math.random()*str.length)],index*10,item +10)
        //修改元素的值，实现高度增加，增加到最大高度后重置为起始，添加随机条件，让"雨"实现随机下落
        Arr[index] = item >screen.availHeight || item > Math.random() *10500 ? 0 :item +10
    })
}
//每隔40ms调用函数
setInterval(rain,40)

随后允许tsc -w ,然后打开html预览效果，就可以实现一个简单的代码雨效果啦！