首先，看看效果吧。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="p"></canvas> <script> // 定义一个函数hacker,这个函数就是画一行黑客帝国 var arr = new Array(255).fill(1); //这里是利用ES6的新知识，无需 Array(256).join(1).split('') // 画布的宽和高 var width = p.width = screen.width; var height = p.height = screen.height; var hacker = function () { // 画一个透明色的幕布，很多叠在一起就变成黑色的了。。透明色很巧妙。。 p.getContext('2d').fillStyle='rgba(0,0,0,.05)'; p.getContext('2d').fillRect(0,0,width,height); // 这里应该是只把字变成绿的 p.getContext('2d').fillStyle='#0F0'; // 画一行绿色的文字吧 arr.forEach((val, index) => { //ES6的箭头函数 // 先要高一串字符来吧s text = String.fromCharCode(3e4+Math.random()*33); let x = index *10; p.getContext('2d').fillText(text,x,val); arr[index] = (val > 758 + Math.random() * 1e4) ? 0 : val + 10; }) } // 33ms执行一次函数，这样就是重复的画 setInterval(hacker, 33); </script> </body> </html>