码迷,mamicode.com
首页 > 其他好文 > 详细

黑客帝国源码

时间:2016-09-30 09:54:00      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <canvas id="c"></canvas>
        <script type="text/javascript" >

        var c = document.getElementById("c");
        var ctx = c.getContext("2d");

        //全屏
        c.height = window.innerHeight;
        c.width = window.innerWidth;


        txts=[0,1,2,3,4,5,6,7,8,9]

        var font_size = 16;
        var columns = c.width/font_size; 
        //用于计算输出文字时坐标,所以长度即为列数
        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, 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)];
        
        
        //如果绘满一屏或随机数大于0.95(此数可自行调整,效果会不同)
        if(drops[i]*font_size > c.height || Math.random() > 0.95){
            drops[i] = 0;}
        //输出文字,注意坐标的计算
        ctx.fillText(text, i*font_size, drops[i]*font_size);
        //用于Y轴坐标增加
        drops[i]++;
    }
}

setInterval(draw, 33);
</script>
    </body>
</html>

 

黑客帝国源码

标签:

原文地址:http://www.cnblogs.com/studyhtml5/p/5922641.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!