HTML5 Canvas实现全屏黑客帝国文字掉落效果

mengkun   发布于 2016年08月15日   阅读次数: 494   我想说两句

参考链接   Tag: Canvas html5

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="full-screen" content="yes"><!--UC强制全屏-->
    <meta name="x5-fullscreen" content="true"><!--QQ强制全屏-->
    <meta name="browsermode" content="application"><!--UC应用模式-->
    <meta name="x5-page-mode" content="app"><!--QQ应用模式-->

    <style type="text/css">
        *{
            margin: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
            cursor: none;
        }
    </style>

    <title>黑客帝国文字掉落效果(点击或按F11全屏)</title>

    <script type="text/javascript">
        window.onload=function(){
            var c = document.getElementById("c");
            var ctx = c.getContext("2d");
            
            //使画布全屏
            c.height = window.innerHeight;
            c.width = window.innerWidth;
            
            //要掉落的文字
            var txts = "0123456789";
            //转换为数组
            txts = txts.split("");
            
            var font_size = 16;
            var columns = c.width/font_size; //计算纵队数
            
            var drops = [];
            //初始值
            for(var x = 0; x < columns; x++)
            	drops[x] = 1; 
            
            //窗体大小发生改变
            window.onresize = function(){
                //使绘图区域全屏
                c.height = window.innerHeight;
                c.width = window.innerWidth;
                columns = c.width/font_size; //计算纵队数
                for(var x = 0; x < columns; x++)
            	    drops[x] = 1;
            }
            
            //进入全屏
            function requestFullScreen() {
                var de = document.documentElement;
                if (de.requestFullscreen) {
                    de.requestFullscreen();
                } else if (de.mozRequestFullScreen) {
                    de.mozRequestFullScreen();
                } else if (de.webkitRequestFullScreen) {
                    de.webkitRequestFullScreen();
                }
            }
            
            //添加点击监听事件(点击全屏)
            document.body.addEventListener('click',function(){
                requestFullScreen(); //调用全屏
            },false);
            
            //绘制下落的文字
            function draw()
            {
                //让背景逐渐由透明到不透明
                ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
                ctx.fillRect(0, 0, c.width, c.height);
                
                ctx.fillStyle = "#0F0"; //文本颜色(绿色)
                ctx.font = font_size + "px arial";
                //逐行输出文字
                for(var i = 0; i < drops.length; i++)
                {
                    //随机取要输出的文字
                    var text = txts[Math.floor(Math.random()*txts.length)];
                    //输出文字,注意坐标的计算
                    ctx.fillText(text, i*font_size, drops[i]*font_size);
                    
                    //如果绘满一屏或随机数大于0.95(此数可自行调整,效果会不同)
                    if(drops[i]*font_size > c.height || Math.random() > 0.95)
                    	drops[i] = 0;
                    
                    //用于Y轴坐标增加
                    drops[i]++;
                }
            }
            
            setInterval(draw, 33);//定时执行
        }
    </script> 
</head>
<body>
    <canvas id="c">很抱歉,您的浏览器不支持该功能!</canvas>
</body>
</html>