<!DOCTYPE html>
<html>
<head>
<title>矩阵特效</title>
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css"> *{margin: 0;padding: 0; } body{font-size: 12px; font-family: "微软雅黑"; color: #666; } </style>
</head>
<body>
<canvas id="mycanvas"> </canvas>
<script type="text/javascript">
var winW;
var winH;
winW = window.screen.width;
winH = window.screen.height;
var canvas = document.getElementById("mycanvas");
canvas.width = winW;
canvas.height = winH;
var cxt = canvas.getContext("2d");
cxt.fillStyle = "black";
cxt.fillRect(0,0,winW,winH);
var str = "qwrygguiaieurgwuietgrweuigiwgb";
var fontSize = 30;
var clos = Math.floor(winW/fontSize);
var array = new Array();
for (var i=0;i<clos;i++){
array.push(Math.random()*winH);
}
function drawStr(){
cxt.fillStyle = "rgba(0,0,0,0.3)";
cxt.fillRect(0,0,winW,winH);
cxt.font = "700 "+fontSize+"px 微软雅黑";
cxt.fillStyle = randomColor();
for (var i = 0; i < clos; i++){
var x = fontSize*i;
var y = array[i]*fontSize;
var indexStr = Math.floor(Math.random()*str.length);
cxt.fillText(str[indexStr],x,y);
if(y>canvas.height && Math.random()>0.96){
array[i] = 0;
}
array[i]++;
}
}
function randomColor(){
var R = Math.floor(Math.random()*256);
var G = Math.floor(Math.random()*256);
var B = Math.floor(Math.random()*256);
return "rgb"+"("+R+","+G+","+B+")";
}
setInterval(drawStr,33);
</script>
</body>
</html>