一、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); }