<!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. GridView在PopWindow中OnItemClick不响应

    在安卓4.0系统中,GridView在PopWindow中OnItemClick不响应,但是有按压效果.需要PopWindow的Show时加入这行代码: popupWindow.setFocusabl ...

  2. Lucene学习总结之四：Lucene索引过程分析 2014-06-25 14:18 884人阅读 评论(0) 收藏

    对于Lucene的索引过程,除了将词(Term)写入倒排表并最终写入Lucene的索引文件外,还包括分词(Analyzer)和合并段(merge segments)的过程,本次不包括这两部分,将在以后 ...

  3. sublim课程2 sublim编辑器的使用（敲代码的时候把这个放旁边用）

    sublim课程2   sublim编辑器的使用(敲代码的时候把这个放旁边用) 一.总结 一句话总结:不必一次记住所有,不可能也得不偿失,先记住常用,慢慢来.(敲代码的时候把这个放旁边用,一下子就熟了 ...

  4. (转)PHP 函数的实现原理及性能分析

    前言 任何语言中,函数都是最基本的组成单元.对于php的函数,它具有哪些特点?函数调用是怎么实现的?php函数的性能如何,有什么使用建议?本文 将从原理出发进行分析结合实际的性能测试尝试对这些问题进行 ...

  5. 设计模式-适配器模式(Go语言描写叙述)

    在上一篇博客设计模式-策略模式(Go语言描写叙述)中我们用最简单的代码用go语言描写叙述了设计模式中的策略模式,用最简单的实例来描写叙述相信能够让刚開始学习的人能够非常轻松的掌握各种设计模式.继上篇博 ...

  6. Android菜鸟的成长笔记（27）——SurfaceView的使用

    前面有关自定义View中进行了绘图,但View的绘图机制存在如下缺陷: 1.View缺乏双缓冲机制. 2.当程序需要更新View上的图像时,程序必须重绘View上显示的整张图片. 3.新线程无法直接更 ...

  7. MySQL的表空间管理

    表空间: MySQL没有真正意义上的表空间管理. MySQL的Innodb包含两种表空间文件模式,默认的共享表空间和每个表分离的独立表空间. 一般来说,当数据量很小的时候建议使用共享表空间的管理方式. ...

  8. NetSnmp配置

    http://blog.csdn.net/shanzhizi/article/details/16985989

  9. php中如何获取数组长度

    php获取数组的长度的方法 一.总结 一句话总结:count方法和sizeof方法 二.php获取数组的长度的方法 php获取数组长度的方法: 一). 获取一维数组的方法: 1.count.sizeo ...

  10. 【u239】整数分解

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 某些数能表示成为一些互不相同的整数的阶乘之和.如9=l!+2! +3!. 现在给定一个非负整数n,要求 ...