sinyi

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

资源客: sinyi 发布时间 : 2019-09-13 70人阅读

代码预览

代码如下

创建一个html复制进去就完事了!

<!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">   
<meta name="x5-fullscreen" content="true">   
<meta name="browsermode" content="application">   
<meta name="x5-page-mode" content="app">   
<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>  

 

RIPRO主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
资源客 » HTML5 Canvas全屏黑客帝国文字掉落效果

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍,本站官方总站为资源客——网址http:www.qq301.com
提示下载完但解压或打开不了?
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或 联络我们.。
VIP享受哪些服务?
本站充值永久VIP后可免费下载全站资源,仅限本站测试资源。你也可以加盟本站,为本站供稿,优秀的源码资源,已经审核可以赠送VIP1月

发表评论