<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>HTML5模仿駭客帝國文字矩陣效果</title>
	</head>
	<body>
	 
	<canvas id="q"></canvas>
	<script type="text/javascript" >
	var s = window.screen;
	var width = q.width = s.width;
	var height = q.height = s.height;
	var letters = Array(256).join(1).split('');
	var draw = function () {
	  q.getContext('2d').fillStyle='rgba(0,0,0,.05)';
	  q.getContext('2d').fillRect(0,0,width,height);
	  q.getContext('2d').fillStyle='#0F0';
	  letters.map(function(y_pos, index){
	    text = String.fromCharCode(3e4+Math.random()*33);
	    x_pos = index * 10;
	    q.getContext('2d').fillText(text, x_pos, y_pos);
	    letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;
	  });
	};
	setInterval(draw, 33);
	</script>
	 
	<p>更多代碼請?jiān)L問:<a href="http://www.lanrentuku.com/js/" target="_blank">懶人圖庫</a></p>
	</body>
	</html>