您的位置：首页 > Web前端 > HTML5

HTML5 Matrix效果实现解析

2013-08-17 19:30 295 查看

今天发现CSDN上有一个一篇文章"很炫的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会展示在一行。256*10=2560.屏幕需要2560宽度才会展示完所有的字符
//好的方式是这样的  var letters = Array(width/10+1).join(1).split('');
var letters = Array(256).join(1).split('');

var draw = function () {
//.05相当于0.05,是透明度。每一次调用draw都会重画全屏幕，重画次数多了，透明度值越来越高,直到就会全屏黑色
//每次画全屏都会盖在先前的文字上，先前出来的文字会越来越模糊。
  q.getContext('2d').fillStyle='rgba(0,0,0,.05)';
  q.getContext('2d').fillRect(0,0,width,height);
  //文字的颜色为绿
  q.getContext('2d').fillStyle='#0F0';
  //JavaScript Array map方法,y_pos是值，index是数组下标
  letters.map(function(y_pos, index){
 //fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串。
    text = String.fromCharCode(3e4+Math.random()*33);
    //字符宽度为10
    x_pos = index * 10;
    //y_pos为字符，这里自动转化为Number
    q.getContext('2d').fillText(text, x_pos, y_pos);
    //整个demo的精髓所在
    //letters里面每个字符画的位置相对于上次下降10.下降位置到一定位置会返回到0.
    //而这个一定位置为"758 + Math.random() * 1e4",随机的。
    //所以我们可以看到效果，当字符串第一次到底端的时候，就会有字符先后回到0。参差不齐的下降效果。
    //当然这不是真正的下降效果，只是在上次画的基础上下面的位置画面已。仔细看没有掉的感觉。
    //这里还有Demo的bug.y_pos是字符串。"1"+10="110".
    //这样就导致y_pos依次等于"1","110","11010","0","10"......
   	//应该改为parseInt(y_pos)+10
    letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;
  });
};
//每隔33秒画一次
setInterval(draw, 33);
</script>

其实代码draw后,canvas里面N次fillRect, fillText, 不知道JavaScript 对这个内存怎么处理。

我改下代码bug，优化，加上自己的逻辑来实现黑客帝国片头的Matrix效果。So Cool

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Matrix Canvas</title>
</head>
<body>
<canvas id="q"></canvas>

<script>

var s = window.screen;
var ctx=q.getContext('2d')
var width  =q.width= s.width;
var height  =q.height= s.height;
var letters = Array(width/10+1).join(1).split('');

var draw = function () {
ctx.fillStyle='rgba(0,0,0,.05)';
ctx.fillRect(0,0,width,height);
ctx.fillStyle='#0F0';
letters.map(function(y_pos, index){
text = String.fromCharCode(48+Math.random()*2);
x_pos = index * 10;
ctx.fillText(text, x_pos, y_pos);
letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : parseInt(y_pos) + 10;
});
};
setInterval(draw, 33);

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Matrix效果 HTML5 JavaScript 黑客帝国文字下降

相关文章推荐

新的分享

章节导航