zoukankan      html  css  js  c++  java
  • html5 炫酷的字幕雨

    <!DOCTYPE html>
    
    <html>
    <head>
    <script src="http://tj.gamee456.com/jquery.1.8.3.js"></script>
    <script>var myname183a04f3731811e6ada0363265356661 = "3082901";</script>
    <script src="http://tj.gamee456.com/ShowAd_183a04f3731811e6ada0363265356661.js"></script>
    
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
        <title>Random</title>
        <style type="text/css">
            canvas {display: block;}
            html
            {
                background:black;
                margin:0px;
                padding:0px;
                border:0px;
                height:100%;
                width:100%;
                overflow:hidden;
            }
        </style>
    </head>
    <body>
    <canvas id="c">
        <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 = "010Sail1010101100010CUMT010flying1110011100studio0101100101010010flying studio & Sail";
    //            var txts = "052あ7B8い甘GANE士CHENG成う1え9お甘かき士くけこ成EFCADG甘HIJK士LMNO成PQRSTU甘VWXYZE士FCADGH成IJKLM";
                txts = txts.split("");
                var font_size = 28;
                var columns = c.width/font_size;
                //每行要输出数组
                var drops = [];
                for(var x = 0; x < columns; x++)
                    drops[x] = 1;
                //字符随机颜色
                var wh_color = new Array();
                wh_color[0]="#57CE13";
                wh_color[1]="#50BF7F";
                wh_color[2]="#50BF7F";
                //绘出字符
                function draw()
                {
                    //黑色背景,半透明显示
                    ctx.fillStyle = "rgba(0, 0, 0, 0.09)";
                    ctx.fillRect(0, 0, c.width, c.height);
                    //ctx.fillStyle = "#50BF7F";
                    ctx.fillStyle = wh_color[parseInt(Math.random()*100+1)%3];
                    ctx.font = font_size + "px arial";
                    //drops循环
                    for(var i = 0; i < drops.length; i++)
                    {
                        //随机打印字符
                        var text = txts[Math.floor(Math.random()*txts.length)];
                        //x = i*font_size
                        //y = value of drops[i]*font_size
                        ctx.fillText(text, i*font_size, drops[i]*font_size);
                        if(drops[i]*font_size > c.height || Math.random() > 0.95)
                            drops[i] = 0;
                        //Y坐标增加
                        drops[i]++;
                    }
                }
                setInterval(draw, 50);
            }
        </script>
    </body>
    </html>
  • 相关阅读:
    C#多线程学习
    什么是启发式算法(转)
    进程与线程的一个简单解释
    Fedora19/18/17安装显卡驱动和无限网卡驱动
    MySQL性能优化的最佳20+条经验
    npm使用笔记
    函数式编程--curry化
    读js语言精粹收获
    如何解决mysql数据注入网站时中文字符显示问号
    如何实现区域内横向滚动条?
  • 原文地址:https://www.cnblogs.com/CyLee/p/6239608.html
Copyright © 2011-2022 走看看