TS实现代码雨
效果
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>rain</title> </head> <body> <canvas id="rain"></canvas> <script src="rain.js"></script> </body> </html>
TS实现
// 代码雨 let canvas = document.querySelector('#rain') as HTMLCanvasElement let ctx = canvas.getContext('2d') as CanvasRenderingContext2D canvas.height = screen.availHeight; //可视区域的高度 canvas.width = screen.availWidth; //可视区域的宽度 let str: string[] = 'HarryAlanYYDS'.split('') let Arr = Array(Math.ceil(canvas.width / 10)).fill(0) //获取宽度例如1920 / 10 192 console.log(Arr); 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 > 10000 * Math.random() ? 0 : item + 10; //添加随机数让字符随机出现不至于那么平整 }) // console.log(Arr); } setInterval(rain, 40)
编译的JS
// 代码雨 var canvas = document.querySelector('#rain'); var ctx = canvas.getContext('2d'); canvas.height = screen.availHeight; //可视区域的高度 canvas.width = screen.availWidth; //可视区域的宽度 var str = 'HarryAlanYYDS'.split(''); var Arr = Array(Math.ceil(canvas.width / 10)).fill(0); //获取宽度例如1920 / 10 192 console.log(Arr); var rain = function () { ctx.fillStyle = 'rgba(0,0,0,0.05)'; //填充背景颜色 ctx.fillRect(0, 0, canvas.width, canvas.height); //背景 ctx.fillStyle = "#0f0"; //文字颜色 Arr.forEach(function (item, index) { ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, item + 10); Arr[index] = item >= canvas.height || item > 10000 * Math.random() ? 0 : item + 10; //添加随机数让字符随机出现不至于那么平整 }); // console.log(Arr); }; setInterval(rain, 40);
分类:
JavaScript
, TypeScript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)