HTML5 Matrix效果实现解析

最新推荐文章于 2021-06-27 01:24:47 发布

原创

最新推荐文章于 2021-06-27 01:24:47 发布 · 4.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Matrix效果 #HTML5 #JavaScript #黑客帝国 #文字下降

本文介绍如何使用HTML5和JavaScript实现酷炫的Matrix效果，参照优快云上的一篇文章，通过分析和优化代码，最终达到黑客帝国片头的文字下降效果。在Chrome中打开效果更佳。

今天发现优快云上有一个一篇文章"很炫的HTML5 Matrix效果".打开来看，demo演示地址.建议用Chrome打开。

效果如下:

实现代码（我在代码里面嵌入注释，这样比较好读懂）：

<script>


var s = window.screen;
//得到浏览器宽度和高度大小,还有设置canvas大小。
var width = q.width = s.width;
var height = q.height = s.height;


//Array(256) 相当于new Array(256),也相当于 [256].JavaScript Object实例化可以省略"new"
//join(1),是给数组每个元素插入"1"返回一个字符串 Array(256).join(1)输出为"1111111111111..111",256个1
//split('')把字符串按字符分隔成数组. letters是256个元素为"1"的数组。
//从后面代码我们知道，字符宽度为10,且letters会展示在一行