黑客帝国效果赏析（包含ES6的语法）

首先，看看效果吧。

代码如下：

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

 

posted @ 2017-06-15 20:57  茶记忆  阅读(349)  评论(0)  编辑  收藏  举报