<!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. 【JavaScript】--ajax

    1 什么是AJAX AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传 ...

  2. Mysql Master-slave 主从配置

    MySQL主从复制 场景描述:主数据库服务器:192.168.10.130,MySQL已经安装,并且无应用数据.从数据库服务器:192.168.10.131,MySQL已经安装,并且无应用数据. 2. ...

  3. 如何比较日期类型的String 大小浅谈.

    有三种解决方法: 第一种直接用字符串类的compareTo方法: String t1="20160707"; String t2="20160708"; int ...

  4. Oracle执行计划详解

    Oracle执行计划详解 --- 作者:TTT BLOG 本文地址:http://blog.chinaunix.net/u3/107265/showart_2192657.html --- 简介:   ...

  5. Notepad++正则表达式语法

    \   转义字符  如:要使用 “\” 本身, 则应该使用“\\” \t  Tab制表符  注:扩展和正则表达式都支持 \r  回车符CR   注:扩展支持,正则表达式不支持 \n  换行符LF   ...

  6. Oracle连接与会话

    连接(connection):连接是从客户端到oracle数据库实例的一条物理路径. 会话(session):会话是数据库实例中存在的一个逻辑实体. case1:一个连接可以有多个会话 SQL> ...

  7. Oracle“钱夹”的使用

    最近几年发生了很多脱库的事件,有些时候安全不到位脱库再所避免,但是可以通过某些技术对数据库进行加密,让即使通过脱库得到的库也没法查看. 在技术层面的实现可以分为应用和数据库层. (1)通过在程序端对某 ...

  8. sweetAlert

    SweetAlert2是一款功能强大的纯Js模态消息对话框插件.SweetAlert2用于替代浏览器默认的弹出对话框,它提供各种参数和方法,支持嵌入图片,背景,HTML标签等,并提供5种内置的情景类, ...

  9. tomcat实现域名访问步骤

    1.找到tomcat的主目录,进入conf文件夹,找到server.xml文件,并打开: 2.修改tomcat的监听端口为80端口: 3.将内容中的 localhost 替换成你想修改的IP地址或者域 ...

  10. hdu3534 树的直径变形

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=3534 题意:n 之后 n-1条边,l,r,w:求出树上的最长路径以及最长路径的条数. // ...