<!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. androidstdio偶遇一

    android的错误 今天在安装androidstdio的过程中产生了遇到了一个错误(之前一直没有重新安装,因为觉得麻烦,但是电脑慢成狗了,只好重新安装....)那么现在步入正题.     首先安装的 ...

  2. expect

    #!/usr/bin/expect -fset ipaddr "192.168.5.4"set passwd "123qwe"set timeout 30 sp ...

  3. iOS书写高质量代码之耦合的处理

    原创 2016-12-26 MrPeak MrPeak杂货铺 耦合是每个程序员都必须面对的话题,也是容易被忽视的存在,怎么处理耦合关系到我们最后的代码质量.今天Peak君和大家聊聊耦合这个基本功话题, ...

  4. C#之反射

    Assembly assembly = Assembly.Load("PeopleDal"); //获取程序集名称 Module[] modules = assembly.GetM ...

  5. webServer-----Spring 集成cxf笔录

    目前webserver主要有俩中方式:1,传统的webserver标准集成方式-生成WSDL的xml文档.       2, 基于restful风格的webserver java RESTful We ...

  6. Launching web on MyEclipse Tomcat 问题

    错误提示: Launching web on MyEclipse Tomcat has encountered a problemAn internal error occurred during: ...

  7. 大数据项目实践：基于hadoop+spark+mongodb+mysql+c#开发医院临床知识库系统

    一.前言 从20世纪90年代数字化医院概念提出到至今的20多年时间,数字化医院(Digital Hospital)在国内各大医院飞速的普及推广发展,并取得骄人成绩.不但有数字化医院管理信息系统(HIS ...

  8. 解决报错 ora-00704 ora-00604 ora-00942 启动不了数据库问题

    早上海南的同事打电话说他们的审计库连不上了启动也报错,问了下最近做了些什么操作,答复是之前添加了一次磁盘. 猜测是添加磁盘启动后/dev/sdx顺序出错,或者没有正常的关闭数据库导致数据库无法正常启动 ...

  9. 关于Charles抓取手机访问的Https请求

    准备工作 本次测试的Charles版本为3.9.1 · 首先在Charles中开启HTTP请求的远程监听. · 然后分别在手机和Mac上安装Charles的证书. 注意:证书一定要一致,否则抓取不到. ...

  10. sqlserver 查找某个字段在哪张表里

    select [name] from [库名].[dbo].sysobjects where id in(select id from [库名].[dbo].syscolumns Where name ...