IT大道IT大道

首页 >  技术 > JavaScript 字符雨 - 司马懿的西山居

JavaScript 字符雨 - 司马懿的西山居

原文 http://blog.csdn.net/chy555chy/article/details/54357888 2017-01-12 00:41:02 0 评论
<html>
    <head>
        <meta charset="utf8"/>
        <title>字符雨</title>
        <style>
            body {
                color:white;
                background-color:black;
                overflow:hidden;
            }
        </style>
    </head>
    <body>
        <div>
        帧率(fps):
        <input id="fpsNum" type="number" min="1" max="30" step="2" value="http://blog.csdn.net/chy555chy/article/details/24" />
        <input id="switchBtn" type="button" value="http://blog.csdn.net/chy555chy/article/details/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");
            c.width = document.body.clientWidth;
            c.height = document.body.clientHeight;
            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";
            ctx.font = font;
            //文字颜色
            var fontColor = "#0f0"
            //文字的列数
            var columns = Math.floor(c.width / fontSize);
            //存储每列的起始坐标
            var drops = new Array(columns);
            for(var i=0; i<columns; i++) {
                drops[i] = Math.floor(Math.random() * c.height);
            }

            //绘制
            function draw() {
                ctx.save();
                ctx.translate(c.width, 0);
                ctx.scale(-1, 1);

                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);  
            }

            intervalId = setInterval(draw, 1000/fpsNum.value);

            //切换当前状态(开始 或 停止)
            function switchState() {    
                isStart = !isStart;
                if(isStart) {
                    switchBtn.value = "http://blog.csdn.net/chy555chy/article/details/stop";
                    intervalId = setInterval(draw, 1000/fpsNum.value);
                } else {
                    switchBtn.value = "http://blog.csdn.net/chy555chy/article/details/start";
                    clearInterval(intervalId);
                }
            }
        </script>
    </body>
</html>

Tags:javascript   canvas   ————JavaScript特效  

标签列表