HTML5 Canvas全屏黑客帝国文字掉落效果 - 阿强爱分享

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

作者: Aqiang

全网最全的网络资源分享网站

手机扫码查看

标签:

黑页代码

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!邮箱:2377724272@qq.com

这段代码是在网上看到,实现的原理比较简单,这里直接贴上代码,相信各位一看就能看懂。

<!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>  
分享到:
打赏

公告提示:本站已开放注册,欢迎投稿。
头像
站长签名: 专注分享各类源码-全网资源免费分享平台好货不私藏

文章作者信息版权声明

阅读时间:  发布于:2019-8-29

本文标题: HTML5 Canvas全屏黑客帝国文字掉落效果

本文链接: https://iooqp.cn/?post=493

版权声明:文章为《 Aqiang》原创,转载请保留出处! 本文共有 2263 个字!

分享到:

精彩评论

未显示?请点击刷新
切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

© 2019 阿强爱分享   京ICP备19031919号-2

免责声明:本站所发布的资源信息及软件文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,本站信息来自网络,版权争议与本站无关。

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏