黑客帝國js特效0.0

<!DOCTYPE HTML>

<head>
    <meta charset="utf-8" />
    <title>黑客帝國特效</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background: black;
        }
        
        canvas {
            display: block;
        }
    </style>
</head>

<body>
    <!-- canvas標簽定義圖形，比如圖表和其他圖像 -->
    <canvas id="c"></canvas>
    <script type="text/javascript">
        //獲取canvas標簽
        var c = document.getElementById("c");
        //getContext() 方法返回一個用于在畫布上繪圖的環(huán)境。
        var ctx = c.getContext("2d");
        //將繪圖高度/寬度擴展到和屏幕相同
        c.height = window.innerHeight;
        c.width = window.innerWidth;

        //準備要顯示的字符串
        // var chinese = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        var chinese = "01010101010101";
        chinese = chinese.split("");

        //要繪制的內容字體大小
        var font_size = 20;
        //要繪制的字體寬度
        var columns = c.width/font_size;
        
        var drops = [];
        for(var x = 0; x < columns; x++){
            drops[x] = 1; 
        }

        function draw()
        {   
            //要繪制的填充顏色透明度
            ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
            //繪制圖形填充大小
            ctx.fillRect(0, 0, c.width, c.height);

            //字體顏色隨機
            // ctx.fillStyle = "#"+Math.floor(Math.random()*999999+100000); //green text
            ctx.fillStyle = "blue"; //green text
            
            ctx.font = font_size + "px arial";
            //循環(huán)繪制文字
            for(var i = 0; i < drops.length; i++)
            {
                //隨機上方自定義的字符串內的內容;
                var text = chinese[Math.floor(Math.random()*chinese.length)];
                //繪制字體
                ctx.fillText(text, i*font_size, drops[i]*font_size);
                //如果字體大于繪制畫板的高度重新繪制;
                if(drops[i]*font_size > c.height && Math.random() > 0.975){
                    drops[i] = 0;
                }
                
                drops[i]++;
            }
        }
        //循環(huán)函數(shù)
        setInterval(draw, 33);
</script>
</body>

</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容