TypeScript + canvas 绘制＜代码雨＞

最新推荐文章于 2023-11-01 17:11:45 发布

浑水摸鱼Zzz

最新推荐文章于 2023-11-01 17:11:45 发布

阅读量923

点赞数

文章标签： typescript javascript html

本文链接：https://blog.youkuaiyun.com/qq_45931327/article/details/129622233

版权

该文章展示了一段用TypeScript编写的代码，用于在HTML5Canvas上创建一个‘代码雨’的动画效果。它选取了一个字符串，随机抽取字符并在画布上以绿色显示，字符随着时间下落。每帧更新时，字符位置会根据一定的规则变化，当字符超出屏幕边界时重置位置。代码利用了setInterval来定时更新画面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码雨演示
在这里插入图片描述
TS代码

let canvas:HTMLCanvasElement = document.querySelector('canvas')
let ctx = canvas.getContext('2d')
canvas.width = screen.availWidth // 整个屏幕宽度
canvas.height = screen.availHeight 

let str:string[] = '01010100101111abcdefg'.split('')
let Arr = Array(Math.ceil(canvas.width / 10)).fill(0) // 向上取整Arr有多少个，并填充0

const rain = () => {
    ctx.fillStyle = 'rgba(0,0,0,0.05)' // 绘制整个canvas背景为黑色
    ctx.fillRect(0,0,canvas.width,canvas.height) // 以坐标轴（0，0）左上角 绘制矩形 长宽为canvas长宽
    ctx.fillStyle = '#0f0' // canvas内文字颜色
    Arr.forEach((item,index) => {
        ctx.fillText(str[Math.floor(Math.random() * str.length)],index * 10,item + 10) // 在指定的(x,y)位置填充指定的文本.
        Arr[index] = item > canvas.height || item > 10000 * Math.random() ? 0 : item + 10 // item从0开始不断+10，直到大于屏幕高度或随机数返回0
    })
}

setInterval(rain,40)

HTML结构

<body>
    <canvas id="canvas"></canvas>
    <script src="./index.js"></script>
</body>