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

html5 炫酷的字幕雨的更多相关文章

  1. html5跟随鼠标炫酷网站引导页动画特效

    html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/tex ...

  2. HTML5打造的炫酷本地音乐播放器-喵喵Player

    将之前捣腾的音乐频谱效果加上一个播放列表就成了现在的喵喵播放器(Meow meow Player,额知道这名字很二很装萌~),全HTML5打造的网页程序,可本地运行也可以挂服务器上用. 在线Demo及 ...

  3. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  4. 6个超炫酷的HTML5电子书翻页动画

    相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏览电子书的内容.今天我们要分享的HTML5应用跟电子书翻页有关,我们精选出来的6个电子书翻页动画都非常炫酷,而且都提供源码下载,有需要的 ...

  5. 7款经典炫酷的HTML5/jQuery动画应用示例及源码

    jQuery是一款普遍受前端开发者欢迎的Javascript框架,但是开发者貌似更关注jQuery开发的插件,海量的jQuery插件让前端开发者非常方便.HTML5的加入让jQuery这个家族更加丰富 ...

  6. web前端炫酷实用的HTML5应用和jQuery插件

    又开始了新的一天,我们也将继续为大家分享许多优秀的HTML5应用和jQuery插件,作为前端开发者来说,这些资源可以帮助你在项目开发上派上用场.下面一起来看看这些炫酷而实用的HTML5应用和jQuer ...

  7. Android开发必知--WebView加载html5实现炫酷引导页面

    大多数人都知道,一个APP的引导页面还是挺重要的,不过要想通过原生的Android代码做出一个非常炫酷的引导页相对还是比较复杂的,正巧html5在制作炫酷动画网页方面比较给力,我们不妨先利用html5 ...

  8. 8个超炫酷仿HTML5动画源码

    1.jQuery万年历插件 带农历老皇历功能 这是一款基于jQuery的日历插件,这款日历插件和之前分享的日历控件有很大差异,它是一本万年历,包含了农历已经老皇历的功能,是一个挑好日子的工具.同时日历 ...

  9. 程序猿必备的10款超炫酷HTML5 Canvas插件

    1.超炫酷HTML5 Canvas 3D旋转地球动画 这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球.另外我 ...

随机推荐

  1. 修改linux文件权限

    Linux系统中的每个文件和目录都有访问许可权限,用它来确定谁可以通过何种方式对文件和目录进行访问和操作. 文件或目录的访问权限分为只读,只写和可执行三种.以文件为例,只读权限表示只允许读其内容,而禁 ...

  2. 父元素相对定位后，子元素在ie下被覆盖的问题！

    <div id="append_parent" style="position: relative;"> <div id="zoom ...

  3. make: *** [out/host/linux-x86/obj/EXECUTABLES/obbtool_intermediates/Main.o] Error 1

    在ubuntu12.04下编译android时,若出现如此错误,那是因为gcc版本太高. 通过gcc -v命令可以发现gcc库在/usr/lib/gcc/i686-linux-gnu目录下,该目录下有 ...

  4. 【leetcode】Number of 1 Bits

    题目描述: Write a function that takes an unsigned integer and returns the number of '1' bits it has (als ...

  5. dir命令只显示文件名

    dir /b 就是ls -f的效果 1057 -- FILE MAPPING_web_archive.7z 2007 多校模拟 - Google Search_web_archive.7z 2083 ...

  6. 开源Unity小插件CheatConsole

    我们在开发游戏的过程中,通常都需要一些快捷的方式来进行一些非常规的测试,这些功能一般被称作控制台或者GM指令,比如虚幻竞技场中,可以使用~键呼出控制台,输入一些指令即可进行快捷设置,比如设置分辨率,全 ...

  7. UILAbel 设置了attributedText 后省略号不显示

    今天遇见个大坑呀,UILabel我设置了 attributedText ,并且设置了 lineBreakMode = NSLineBreakByTruncatingTail 就是想让多余的内容显示成省 ...

  8. jquery中的ajax方法参数总是记不住，这里记录一下。

    1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...

  9. 城管停车执法打印APP 移动云POS 现场打印告知单-执法平台+智能POS客户端系统

    市城管局城管支队工作人员使用最新配备的城管执法手持终端对便道违法停放车辆进行拍照取证. 城管执法手持终端具备拍照.现场打印.无线传输等功能,执法人员只要在该终端登录,即可随时实现对违停车辆的拍照取证. ...

  10. iOS之防止用户重复点击Button（按钮）问题

    在项目中,我们往往会遇到这样的问题:因为网络较慢的原因,用户会不耐烦的一直去点击按钮,这样导致的结果时:相关代码一遍一遍的被重复执行,如果按钮的事件是网络请求的话,这样又导致一种网络请求的循环.所以我 ...