TS实现代码雨
Posted 消逝的绵羔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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);
以上是关于TS实现代码雨的主要内容，如果未能解决你的问题，请参考以下文章