一、HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>Matrix Text - HTML5 Canvas Demo</title>
<script type="text/javascript" src="matrixtext.js"></script>
<style>
@font-face
{
font-family: 'MatrixCode';
src: url("matrix code nfi.otf") format("opentype");
}
html, body
{
background: #000;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: hidden;
}
canvas { font-family: 'MatrixCode'; }
p
{
font-family: 'MatrixCode';
color: #fff;
}
</style>
</head>
<body onload="init();">
<canvas id="theMatrix" width="1280" height="800"> <p>Your browser doesn't support canvas...L0Z3R</p>
</canvas>
</body>
</html>
二、JS代码：
var textStrip = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',
'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
var stripCount=90, stripX=new Array(), stripY=new Array(), dY=new Array(), stripFontSize = new Array();
for (var i = 0; i < stripCount; i++) {
stripX[i] = Math.floor(Math.random()*1265);
stripY[i] = -100;
dY[i] = Math.floor(Math.random()*7)+3;
stripFontSize[i] = Math.floor(Math.random()*24)+12;
}
var theColors = ['#cefbe4', '#81ec72', '#5cd646', '#54d13c', '#4ccc32', '#43c728'];
var elem, context, timer;
function drawStrip(x, y) {
for (var k = 0; k <= 20; k++) {
var randChar = textStrip[Math.floor(Math.random()*textStrip.length)];
if (context.fillText) {
switch (k) {
case 0:
context.fillStyle = theColors[0]; break;
case 1:
context.fillStyle = theColors[1]; break;
case 3:
context.fillStyle = theColors[2]; break;
case 7:
context.fillStyle = theColors[3]; break;
case 13:
context.fillStyle = theColors[4]; break;
case 17:
context.fillStyle = theColors[5]; break;
}
context.fillText(randChar, x, y);
}
y -= stripFontSize[k];
}
}
function draw() {
// clear the canvas and set the properties
context.clearRect(0, 0, elem.width, elem.height);
context.shadowOffsetX = context.shadowOffsetY = 0;
context.shadowBlur = 8;
context.shadowColor = '#94f475'; for (var j = 0; j < stripCount; j++) {
context.font = stripFontSize[j]+'px MatrixCode';
context.textBaseline = 'top';
context.textAlign = 'center'; if (stripY[j] > 1358) {
stripX[j] = Math.floor(Math.random()*elem.width);
stripY[j] = -100;
dY[j] = Math.floor(Math.random()*7)+3;
stripFontSize[j] = Math.floor(Math.random()*24)+12;
drawStrip(stripX[j], stripY[j]);
} else drawStrip(stripX[j], stripY[j]); stripY[j] += dY[j];
}
}
function init() {
// get the canvas' id
elem = document.getElementById('theMatrix');
if (!elem || !elem.getContext) return; // get the canvas' context
context = elem.getContext('2d');
if (!context) return; timer = setInterval('draw()', 70);
}