首页
运维教程
Linux基础
系统服务
系统架构
数据库
shell脚本
虚拟化
大数据
DevOps
企业案例
运维开发
python
go语言
运维安全
行业资讯
网络基础
系统安全
运维面试
学习路线
学习方法
面试题库
职场解惑
软件
运维软件
办公软件
书籍资源
技术陪跑营
重要信息
首页 运维开发python黑客帝国代码雨

黑客帝国代码雨

<!DOCTYPE html>
 <html> 
<head> 
<title>黑客帝国代码雨</title> 
</head> 
<body> 
<canvas id="canvas">
</canvas> 
<style type="text/css">
body{margin: 0; padding: 0; overflow: hidden;}
</style> <script type="text/javascript">
var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');


        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;

        var texts = '胜寒谈架构师成长'.split('');

        var fontSize = 16;
        var columns = canvas.width/fontSize;
        // 用于计算输出文字时坐标,所以长度即为列数
        var drops = [];
        //初始值
        for(var x = 0; x < columns; x++){
            drops[x] = 1;
        }

        function draw(){
            //让背景逐渐由透明到不透明
            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            //文字颜色
            ctx.fillStyle = '#0F0';
            ctx.font = fontSize + 'px arial';
            //逐行输出文字
            for(var i = 0; i < drops.length; i++){
                var text = texts[Math.floor(Math.random()*texts.length)];
                ctx.fillText(text, i*fontSize, drops[i]*fontSize);

                if(drops[i]*fontSize > canvas.height || Math.random() > 0.95){
                    drops[i] = 0;
                }

                drops[i]++;
            }
        }
    setInterval(draw, 33);
</script> 
</body>

本文链接:http://www.geekyunwei.com/1874.html

网友评论comments

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

暂无评论

Copyright © 2021 极客运维 公众号《极客运维之家》
扫二维码
扫二维码
返回顶部