首先，看看效果吧。

代码如下：

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

黑客帝国效果赏析（包含ES6的语法）的更多相关文章

  1. ES6新语法

    ES6新语法概览 简介 ES6是JavaScript语言的新一代标准,加入了一些新的功能和语法,正式发布于2015年6月,亦称ES2015:该标准由ECMA(欧洲计算机制造联合会)的第39号技术专家委 ...

  2. Vue（1）- es6的语法、vue的基本语法、vue应用示例，vue基础语法

    一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...

  3. ES5与ES6常用语法教程之 ②解构语法糖、声明变量异同

    js常用语法系列教程如下 es5与es6常用语法教程(1) es5与es6常用语法教程(2) es5与es6常用语法教程(3) es5与es6常用语法教程(4) es5与es6常用语法教程(5) es ...

  4. ES6 基本语法：

    ES6.基本语法* ES6可以使用=>作为函数表达形式,简单的风格: 参数 + => +函数体;* 在JS中是以var定义一个变量 ,在ES6中是以let定义变量; let 和 var 区 ...

  5. ES6常用语法

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...

  6. ECMAScript简介以及es6新增语法

    ECMAScript简介 ECMAScript与JavaScript的关系 ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现.(前者是后者的 ...

  7. ES6新语法的介绍

    对于ES6新语法,阮一峰有一篇文章介绍的挺详细 http://es6.ruanyifeng.com/#docs/destructuring

  8. ES6最新语法

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...

  9. ES6新语法之let关键字；有别于传统关键字var的使用

    ES6新语法于2015年发布:而我这个前端小白在17年才接触到.惭愧惭愧!!不过到目前为止,似乎只有FireFox和Chrome对ES6的支持相对良好.不过既然人家ES6已经出来了,还是要跟上技术的潮 ...

随机推荐

  1. SQL Server的实例恢复解析

    同Oracle一样,SQL Server在非一致性关闭的时候也会进行实例恢复(Instance Recovery),本文根据stack overflow的文章介绍一些SQL Server实例恢复的知识 ...

  2. C++实现第三方资源释放与载入过程（以DLL为例）

    简介 我们经常看见有一些程序开始执行时会释放一些文件,以便于后续操作.例如一些病毒为了便于传播和隐藏,经常把一些需要用的动态库或是驱动文件打包进一个可执行文件中,再由需要使用的时候,再临时释放和加载. ...

  3. gcc5.4报错对‘std::__cxx11::basic_string<char, std::char_traits<char>, std::allocator<char> >::~basic_string()’未定义的引用

    我在编译ligra是遇到了这个问题,网上搜了一遍,发现是了原因https://gcc.gnu.org/onlinedocs/libstdc%2B%2B/manual/using_dual_abi.ht ...

  4. 数据结构【查找】—平衡二叉树AVL

    /*自己看了半天也没看懂代码,下次再补充说明*/ 解释: 平衡二叉树(Self-Balancing Binary Search Tree 或Height-Balanced Binary Search ...

  5. [WeChall] Training: MySQL I (MySQL, Exploit, Training)

    Training: MySQL I (MySQL, Exploit, Training) MySQL Authentication Bypass - The classic This one is t ...

  6. Python编码问题小结

    开门见山 decode的作用是将其他编码的字符串转换成Unicode编码,如str1.decode('gb2312'),表示将gb2312编码的字符串str1转换成Unicode编码. encode的 ...

  7. 在Linux上编译Hadoop-2.4.0实践与总结

    问题导读: 1.编译源码前需要安装哪些软件? 2.安装之后该如何设置环境变量? 3.为什么不要使用JDK1.8? 4.mvn package -Pdist -DskipTests -Dtar的作用是什 ...

  8. mysql数据权限的分配

    在我们使用mysql数据库时,有时我们的程序与数据库不在同一机器上,这时我们需要远程访问数据库.缺省状态下,mysql的用户没有远程访问的权限. 下面介绍两种方法,解决这一问题. 1.改表法 可能是你 ...

  9. Android studio中布局文件出现render problem问题

    当做layout时,可能会出现render problem的情况.意思就是无法预览当前布局页面,这种情况是因为API版本太高造成的.只需要修改API为更低版本即可.

  10. [matlab] 18.图与网络 (转载)

    基本概念: 图论[Graph Theory]是数学的一个分支.它以图为研究对象.图论中的图是由若干给定的点及连接两点的线所构成的图形,这种图形通常用来描述某些事物之间的某种特定关系,用点代表事物,用连 ...