黑客帝国雨效果JS

Posted 2021-11-22 liubeimeng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了黑客帝国雨效果JS相关的知识，希望对你有一定的参考价值。

黑客帝国雨效果JS。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{margin: 0;padding: 0;}
    body{overflow: hidden;}
    canvas{background: #111;}
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");

        var W = window.innerWidth;
        var H = window.innerHeight;

        canvas.width = W;
        canvas.height = H;

        var fontSize = 16;
        //计算列
        var colunm = Math.floor(W/fontSize);
        //console.log(colunm);
        //存储Y值
        var drops = [];

        for(var i = 0;i<colunm;i++){
            drops[i] = 1;
        }
        //console.log(...drops)
        var str = "Welcome javascript";

        //let tempRandom = Math.random()*str.length;
        //console.log(tempRandom,Math.floor(tempRandom))
        //把文字画到屏幕上
        function draw(){
            context.fillStyle = "rgba(0,0,0,0.05)";//文字随机出现的背景
            context.fillRect( 0, 0, W, H);
            context.font = "700 " + fontSize + "px ARIAL";
            context.fillStyle = "#00cc33";
            //context.fillStyle = randColor();
            //console.log("你好");
            for(var i = 0; i<colunm; i++){
                //让字符串中的内容随机出现
                var index = Math.floor(Math.random()*str.length);
                var x = i*fontSize;
                var y = drops[i]*fontSize;
                context.fillText(str[index],x,y);
                console.log(str[index],x,y);
                if(y>=canvas.height && Math.random()>0.99){
                    drops[i] = 0;
                }
            drops[i]++;
            }
        }

        function randColor(){
            var r = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var b = Math.floor(Math.random()*256);
            return "rgb("+r+","+g+","+b+")";
        }

        draw();
        setInterval(draw,20);
    </script>
</body>
</html>

效果截图：

技术图片

以上是关于黑客帝国雨效果JS的主要内容，如果未能解决你的问题，请参考以下文章

黑客帝国雨效果JS

黑客帝国乱雨纷飞效果

linux终端黑客帝国代码雨效果

黑客帝国既视感用Python实现黑客字符雨的效果示例代码

Linux数字雨