基于JavaScript和HTML5 Canvas实现的Matrix,查看效果:matrix.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Matrix - Based on HTML5 Canvas and Javascript</title>
<style>* {margin: 0; padding: 0;}</style>
</head>
<body style="background-color:#000;">
<canvas id="matrix" style="display:block;"></canvas>

<script type="text/javascript">
    window.onload = function()
    {
        var map = document.getElementById("matrix");
        map.width = window.innerWidth;
        map.height = window.innerHeight;

        var fpx = 10;
        var vec = [];
        for (var i=0, n=map.width/fpx; i<n; i++)
        {
            vec[i] = 1;
        }

        var cxt = map.getContext("2d");
        cxt.font = fpx + "px monospace";

        setInterval(function()
        {
            cxt.fillStyle = "rgba(0,0,0,0.05)";
            cxt.fillRect(0, 0, map.width, map.height);

            for (var i=x=y=0, w='', l=vec.length; i<l; i++)
            {
                y = vec[i] * fpx + (vec[i] > 1 ? (vec[i] - 1) * fpx / 2 : 0);

                if (y > map.height)
                {
                    if (Math.random() < 0.012)
                    {
                        vec[i] = 1;
                    }
                }
                else
                {
                    x = i * fpx;
                    w = String.fromCharCode(Math.floor(Math.random() * 94 + 33));

                    cxt.fillStyle = "Hello World".indexOf(w) > -1 ? "#fff" : "#0f0";
                    cxt.fillText(w, x, y);

                    ++vec[i];
                }
            }
        }, 120);
    };
</script>
</body>
</html>