黑客帝国程序运行界面效果(收藏)

由以下代码创建html文件,双击浏览器运行,ole

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>黑客帝国</title>
    <style>
        *{margin: 0;padding: 0;}
        canvas{display: block;}
    </style>
</head>
<body>
    <canvas id="c"></canvas>
    <script>
        document.addEventListener("DOMContentLoaded",function(){
            var oC=document.getElementById("c");
            var gt=oC.getContext("2d");
            //全屏
            oC.width=window.innerWidth;
            oC.height=window.innerHeight;
            var font=16;
            var txt="0123456789";
            txt=txt.split("");
            //列数
            var col=oC.width/font;
            var arr=[];
            //初始值
            for(var i=0;i<col;i++){
                arr[i]=1;
            }
            //输出文字
            function show(){
                gt.fillStyle="rgba(0,0,0,0.05)";
                gt.fillRect(0,0,oC.width,oC.height);
                gt.fillStyle="green";
                gt.font=font+"px arial";
                for(var i=0;i<arr.length;i++){
                //随机输出文字
                    var oT=txt[Math.floor(Math.random()*txt.length)];
                    //输出文字坐标
                      gt.fillText(oT, i*font, arr[i]*font);
                        //如果绘满一屏或随机数大于0.95(此数可自行调整,效果会不同)
                        if(arr[i]*font>oC.height || Math.random() > 0.95)
                            arr[i] = 0; 
                        //用于Y轴坐标增加
                        arr[i]++;
                      }
                    }
            setInterval(show,30);
        },false)
    </script>
</body>
</html>

发布了73 篇原创文章 · 获赞 12 · 访问量 19万+

猜你喜欢

转载自blog.csdn.net/MissLong/article/details/84237060