<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>黑客帝国文字下落</title>

  <style>

  html, body {margin:0; padding:0; background-color:#000;}

   </style>

  <script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>

 </head>

 <body>

 <canvas id="matrix" height="943" width="1920"></canvas>

    <script type="text/javascript">

    //文字

    var txts = "0123456789!@#$%^&*()~_+℃☆○※";

    //转为数组

    txts = txts.split("");

    var matrix=document.getElementById("matrix");

    var context=matrix.getContext("2d");

    matrix.height=window.innerHeight;

    matrix.width=window.innerWidth;

    var drop=[];

    var font_size=16;

    var columns=matrix.width/font_size;

    for(var i=0;i<columns;i++)

        drop[i]=1;

    function drawMatrix(){

        context.fillStyle="rgba(0, 0, 0, 0.09)";

        context.fillRect(0,0,matrix.width,matrix.height);

        context.fillStyle="green";

        context.font=font_size+"px";

        for(var i=0;i<columns;i++){

            //随机取要输出的文字

            var text = txts[Math.floor(Math.random()*txts.length)];

            //输出文字，注意坐标的计算

            context.fillText(text,i*font_size,drop[i]*font_size);/*get 0 and 1*/

            if(drop[i]*font_size>(matrix.height*2/3)&&Math.random()>0.95)/*reset*/

                drop[i]=0;

            drop[i]++;

        }

    }

    setInterval(drawMatrix,33);

</script>

 </body>

</html>

js仿黑客帝国文字数字雨效果的更多相关文章

  1. marquee实现文字移动效果;js+div实现文字无缝移动效果

    1.marquee实现文字移动: <marquee width="220px;" scrollamount="5" onmouseover="t ...

  2. js实现黑客帝国文字下落效果

    突然想到这个效果便想实现以下. 当然免不了要百度一下,于是查找到 http://www.cnblogs.com/myvin/p/4775152.html这篇文章, 效果可以查看博文中的给出的效果图.那 ...

  3. iType.js仿输入文字效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Jquery仿彩票更换数字动画效果

    <script type="text/javascript" src="jquery-1.11.3.min.js"></script> ...

  5. js仿京东轮播图效果

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  6. canvas+gif.js打造自己的数字雨头像

    前言 昨天 是1024程序员节,不知道各位看官过的怎么样.既然是过节,就要有个过节的样子,比方说,换个头像

  7. JS — 实现简单的数字时钟

    js实现简单的数字时钟 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  8. JS制作一个创意数字时钟

    通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...

  9. 黑客帝国雨效果JS

    黑客帝国雨效果JS. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

随机推荐

  1. [LeetCode][Java] Letter Combinations of a Phone Number

    题目: Given a digit string, return all possible letter combinations that the number could represent. A ...

  2. python没有++和--操作

  3. nginx源代码分析--ngx_http_optimize_servers（）函数

    这个函数做了连部分工作:1)以port为入口点 将实用的信息存放到hash表内 2)调用ngx_http_init_listening()函数 对port进行监听 1. 在ngx_http_core_ ...

  4. Cisco IOS images

    Cisco IOS images for Dynamips - GNS3http://docs.gns3.com/1-kBrTplBltp9P3P-AigoMzlDO-ISyL1h3bYpOl5Q8m ...

  5. Hive的日期函数

    1.unix时间戳转时间函数 语法: from_unixtime(bigint unixtime[, string format]) 返回值: string 说明: 转化UNIX时间戳(从1970-0 ...

  6. 简洁常用权限系统的设计与实现(四):不维护level，用递归方式构造树

    第三篇中,我们通过维护节点的深度level,通过迭代所有的节点,只需要一次,就构造了树.  本篇,换一种方式. 好处是:不维护节点的深度level,增加和修改节点时,也不用维护.递归实现,代码比较清晰 ...

  7. AJAX代码格式

    var request; //XMLHttpRequest的创建 function createRequest(url){ if(window.XMLHttpRequest){ request = n ...

  8. Eclipse 一直不停 building workspace... 完美解决总结

    Eclipse 一直不停 building workspace... 一.产生这个问题的原因多种 1.自动升级 2.未正确关闭  3.maven下载lib挂起 等..二.解决总结 (1).解决方法  ...

  9. NOIP 模拟 box - 费用流 / 匈牙利

    题目大意: 给出n(\(\le 200\))个盒子,第i个盒子长\(x_i\),宽\(y_i\),一个盒子可以放入长宽都大于等于它的盒子里,并且每个盒子里只能放入一个盒子(可以嵌套),嵌套的盒子的占地 ...

  10. 【t014】拯数

    [题目链接]:http://noi.qz5z.com/viewtask.asp?id=t014 [题意] [题解] 这个锁的序列,如果把末尾的0去掉; 然后再倒过来; 那么就是这个序列对应的格雷码了; ...