html5实现黑客帝国数字矩阵效果



<!DOCTYPE html>


<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Martrix</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000;
            overflow: hidden;
            color:#e6922a;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    
    <script type="text/javascript">
        var canvas = document.getElementById("canvas"),
            context = canvas.getContext("2d");


        var fontSize = 14,
            listText = "0123456789ABCDEF".split(""),
            column, row,
            listColumn = [];


        function draw() {
            //画背景
            context.fillStyle = "rgba(0, 0, 0, 0.05)";
            context.fillRect(0, 0, canvas.width, canvas.height);
            context.save();


            //画Logo
            context.shadowColor = "#074425";
            context.shadowBlur = parseInt(Math.random() * 40 + 1);
            context.font = "bold 36px Arial";
            context.fillStyle = "#eefbf5";
            context.fillText("MARTRIX", (canvas.width / 2 - context.measureText("MARTRIX").width / 2), canvas.height - 200);
            context.fillText("REVOLUTIONS", (canvas.width / 2 - context.measureText("REVOLUTIONS").width / 2), canvas.height - 150);
            context.font = "16px Microsoft Yahei";
            context.fillText("HACK MATRIX MADE BY XH", (canvas.width / 2 - context.measureText("HACK MATRIX MADE BY XH").width / 2), canvas.height - 100);


            //画代码
            context.restore();
            context.font = "normal " + fontSize + "px Arial";
            context.fillStyle = "#12ee46";
            for (var i = 0; i < column; i++) {
                if (Math.random() > 0.5) {
                    var str = listText[parseInt(Math.random() * listText.length)];
                    context.fillText(str, i * fontSize, listColumn[i] * fontSize);
                    listColumn[i] += 1;
                    if (listColumn[i] >= row) {
                        listColumn[i] = 0;
                    }
                }
            }
        }


        function resize() {
            canvas.width = window.innerWidth - 3;
            canvas.height = window.innerHeight - 3;


            column = canvas.width / fontSize,
            row = canvas.height / fontSize;


            for (var i = 0; i < column; i++) {
                listColumn[i] = 1;
            }
        }


        window.addEventListener("resize", resize);


        canvas.addEventListener("mousedown", function () {
            clearInterval(timer);
            timer = setInterval(draw, 20);
        });


        canvas.addEventListener("mouseup", function () {
            clearInterval(timer);
            timer = setInterval(draw, 40);
        });


        resize();
        var timer = setInterval(draw, 40);


    </script>
</body>

</html>




上一篇:CentOS安装视频转换FFmpeg和切割工具segmenter


下一篇:App 渠道追踪三大难题:看完这篇文章你的拉新率能提升200%