JavaScript實現字元雨效果

2022-06-19 14:00:35
本文範例為大家分享了JavaScript實現字元雨效果的具體程式碼，供大家參考，具體內容如下
<html>
    <head>
        <meta charset="utf8"/>
        <title>字元雨</title>
        <style>
            body {
                color:white;
                background-color:black;
                overflow:hidden;
            }
        </style>
    </head>
    <body onresize="init()">
        <div>
        影格率(fps)：
        <input id="fpsNum" type="number" min="1" max="35" step="2" value="24" />
        <input id="switchBtn" type="button" value="stop" onclick="switchState()" />
        </div>
        <canvas id="canvas">您的瀏覽器不支援canvas</canvas>
        <script>
            var c = document.getElementById("canvas");
            var fpsNum = document.getElementById("fpsNum");
            var switchBtn = document.getElementById("switchBtn");
            var ctx = c.getContext("2d");

            //動畫是否已經開始
            var isStart = true;
            //迴圈呼叫器id
            var intervalId = 0;
            //每次迴圈繪製一個0.1透明度的蒙版，讓以前繪製的文字留下一段陰影效果
            var clearColor = "rgba(0,0,0,.1)";
            //文字大小
            var fontSize = 20;
            //文字
            var font = fontSize + "px arial";
            //文字顏色
            var fontColor = "#0f0"
            //儲存每列的起始座標
            var drops = [];

            //重啟程式
            function init() {
                c.width = document.body.offsetWidth;
                c.height = document.body.offsetHeight;
                //文字的列數
                var columns = Math.floor(c.width / fontSize);
                //原來的列數
                var len = drops.length;
                if(len < columns) {
                    for(var i=len; i<columns; i++) {
                        //初始化隨機的列座標
                        drops.push(Math.floor(Math.random() * c.height));
                    }
                } else {
                    drops.slice(columns, len - columns);
                }
                //如果當前已經正在繪製，則需要先終止繪製再重啟繪製
                if(isStart) {
                    switchState();
                } 
                switchState();
            }

            //繪製
            function draw() {
                ctx.save();
                ctx.translate(c.width, 0);
                ctx.scale(-1, 1);
                ctx.font = font;
                ctx.fillStyle = fontColor;
                drops.map(function(currentValue, index) {
                    //接受一個或多個unicode值，然後返回一個字串
                    var text = String.fromCharCode(65 + Math.round(Math.random() * 33));
                    //var text = Math.floor(Math.random() * 2);
                    var x = index * fontSize;
                    var y = currentValue * fontSize;
                    ctx.fillText(text, x, y);
                    if(y > c.height * 0.6 && Math.random() > 0.85) {
                        drops[index] = 0;
                    }
                    drops[index]++;
                });
                ctx.restore();

                ctx.fillStyle = clearColor;
                ctx.fillRect(0, 0, c.width, c.height);  
            }

            //切換當前狀態(開始 或 停止)
            function switchState() {    
                isStart = !isStart;
                if(isStart) {
                    switchBtn.value = "stop";
                    intervalId = setInterval(draw, 1000/fpsNum.value);
                } else {
                    switchBtn.value = "start";
                    clearInterval(intervalId);
                }
            }

            init();
        </script>
    </body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。
JavaScript實現字元雨效果

熱門文章
