teamemory

首先,看看效果吧。

代码如下:

<!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>

 

分类:

技术点:

相关文章: