<!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. 1. java.util.concurrent - Java 并发工具包

    1. java.util.concurrent - Java 并发工具包 Java 5 添加了一个新的包到 Java 平台,java.util.concurrent 包.这个包包含有一系列能够让 Ja ...

  2. Android OkHttp网络连接封装工具类

    package com.lidong.demo.utils; import android.os.Handler; import android.os.Looper; import com.googl ...

  3. win7

    http://www.xitongiso.com/?pot http://www.potplayer.org/

  4. 【Bash百宝箱】Linux shell学习

    shell特点-- Linux有多种shell能够使用,默认的为bash,bash有以下几个主要特点. 1.命令记忆能力 在命令行中按上下键能够找到一个前/后输入的命令.这些命令记录在-/.bash_ ...

  5. 【u017】请柬

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 在电视时代,没有多少人观看戏剧表演.Malidinesia古董喜剧演员意识到这一事实,他们想宣传剧院, ...

  6. Android5.0网络之ipv6

    移动设备的大量兴起势必进一步加强ip地址不足的危机. ipv6或许成为一种比較好的选择方案. ipv6地址的获取分为两种方式:无状态:有状态 无状态:通过接收路由公告(RA)来设置自己的ipv6地址 ...

  7. [Typescript] What is a Function Type ? Function Types and Interfaces - Are They Related ?

    Function Type: type messageFn = (name: string) => string; function sayHello(name: string): string ...

  8. Qt for Automation

    Automation, Automotive, and other industries In addition to improving the generic product offering a ...

  9. webtool小问题

    webtool小问题 erlang的观察工具如crashdump,appmon,cover等工具有二种不同的界面:gs(wx)和web.这些tool都遵循一定的接口,用户可以自行扩展这些功能,使的能够 ...

  10. BZOJ 1369 Gem - 树型dp

    传送门 题目大意: 给一棵树上每个点一个正权值,要求父子的权值不同,问该树的最小权值和是多少. 题目分析: 证不出来最少染色数,那就直接信仰用20来dp吧:dp[u][i]表示u节点权值赋为i时u子树 ...