zoukankan      html  css  js  c++  java
  • 黑客帝国效果赏析(包含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>
  • 相关阅读:
    求欧拉路径模版 fleury算法
    回学校前的计划
    高斯消元模版
    usaco 3.2 Stringsobits 数位dp
    dijkstra模版
    codeforces AIM Tech Round (Div. 2)
    bnuoj 51275 并查集按深度合并建树
    bzoj3674: 可持久化并查集
    poj2104 求区间第k大 可持久化线段树
    Miller_Rabin判断素数模版
  • 原文地址:https://www.cnblogs.com/teamemory/p/7020018.html
Copyright © 2011-2022 走看看