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>
  • 相关阅读:
    json
    mybatis 一对一关联对象查询
    下拉框多级联动
    时间轴和操作元素属性
    上传
    多选框获取和全选
    字符串操作,截取最后一个逗号
    idea快捷键使用
    获取下拉框的文本和值,下拉框默认选中
    toString()函数分析
  • 原文地址:https://www.cnblogs.com/teamemory/p/7020018.html
Copyright © 2011-2022 走看看