首先，看看效果吧。

代码如下：

<!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. Python语法的转义字符

    Python语法的转义字符 转义字符 说 明 \ 续行符 \n 换行符 \0 空  \t 水平制表符,用于横向跳到下一制表位 \'' 双引号 \' 单引号 \\ 一个反斜杠 \f 换页 \0dd 八进 ...

  2. C语言的main函数到底该怎么写

    公众号[编程珠玑]:专注但不限于分享计算机编程基础,Linux,C语言,C++,Python,数据库等编程相关[原创]技术文章,号内包含大量经典电子书和视频学习资源.欢迎一起交流学习,一起修炼计算机“ ...

  3. MySQL高级知识（四）——Explain

    前言:explain(执行计划),使用explain关键字可以模拟优化器执行sql查询语句,从而知道MySQL是如何处理sql语句.explain主要用于分析查询语句或表结构的性能瓶颈. 注:本系列随 ...

  4. 【足迹C++primer】32、定制操作_2

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/cutter_point/article/details/32301839 定制操作_2 完整的big ...

  5. centos7下安装docker（15.7容器跨主机网络---calico）

    Calico是一个纯三层的虚拟网络方案,Calico为每个容器分配一个IP,每个host都是router,把不同host的容器连接起来.与vxlan不同的是:calico不对数据包进行封装,不需要NA ...

  6. python入门学习：9.文件和异常

    python入门学习:9.文件和异常 关键点:文件.异常 9.1 从文件中读取数据9.2 写入文件9.3 异常9.4 存储数据 9.1 从文件中读取数据 9.1.1 读取整个文件  首先创建一个pi_ ...

  7. 使用VMWare虚拟mac系统，设置网络的正确姿势

    1. 启动mac虚拟机: 2. 虚拟机-虚拟机设置-网络适配器-选择NAT模式: 3. 打开mac的网络设置,选择使用DHCP模式,并设置DNS服务器为win的DNS: 4. 回到win,控制面板-网 ...

  8. WPF之DataGrid应用 翻页

    前几天打算尝试下DataGrid的用法,起初以为应该很简单,可后来被各种使用方法和功能实现所折磨.网络上的解决方法太多,但也太杂.没法子,我只好硬着头皮阅览各种文献资料,然后不断的去尝试,总算小有成果 ...

  9. 转://使用insert插入大量数据的总结

    使用insert插入大量数据的个人经验总结在很多时候,我们会需要对一个表进行插入大量的数据,并且希望在尽可能短的时间内完成该工作,这里,和大家分享下我平时在做大量数据insert的一些经验. 前提:在 ...

  10. Nginx 反向代理 -- 一路上的坑转载

    个人学习之用转子https://www.cnblogs.com/xjbBill/p/7477825.html 前些天刚过来新公司上班,公司的项目都挺多的,只不过项目都是第三方公司团队开发的,现在本公司 ...