<!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. php实现二叉树的镜像（二叉树就是递归）

    php实现二叉树的镜像(二叉树就是递归) 一.总结 二叉树就是递归 二.php实现二叉树的镜像 题目描述 操作给定的二叉树,将其变换为源二叉树的镜像. 输入描述: 二叉树的镜像定义:源二叉树 8 / ...

  2. ORACLE会话数、连接数配置

    ORACLE会话数.连接数配置 ORACLE会话数.连接数配置 ORACLE的会话数和连接数参数配置 以sysdba身份登录 sqlplus sys/xxxx as sysdba; 查看最大连接数: ...

  3. linux文件管理小结之自己定义more

    1.more命令功能 more命令用于查看内容超过一屏的文本(相似于cat) 基本功能: 1.输入backspace :内容翻一屏 2.输入enter : 内容翻一行 3.输入q:退出 4.实时显示已 ...

  4. Android JNI －基础篇

    JNI(Java Native Interface,JAVA本地接口) 可以使Java代码和其他语言写的代码(如C/C++代码)进行交互.为什么要进行交互? 首先,Java语言提供的类库无法满足要求, ...

  5. mysql修改root密码百分百解决你的问题

    原文:mysql修改root密码百分百解决你的问题 1.MySQL版本8.0.4之后修改密码 ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_n ...

  6. 安装 Visual Studio，连接中国区 Azure

    中国数据中心 目前,中国区 Azure 有两个数据中心,在位置字段中显示为“中国北部”和“中国东部”. 在 Azure 上创建应用程序的区别 在中国区 Azure 上开发应用程序与在境外 Azure ...

  7. Oracle数据库零散知识06 -- Package的定义与简单触发器

    CREATE OR REPLACE PACKAGE pak_02 IS--包头 --这里可定义公共参数 FUNCTION fun_01 RETURN NUMBER; PROCEDURE pro_01 ...

  8. Role-based access control modeling and auditing system

    A role-based access control (RBAC) modeling and auditing system is described that enables a user to  ...

  9. error: invalid abbreviation code [25] for DIE at 0x0000003e in Assertion failed: (*offset_ptr == end_prologue_offset), function ParsePrologue, file /S

    error: invalid abbreviation code [25] for DIE at 0x0000003e in '/Users/mac/Desktop/MYiosfiles/test/X ...

  10. JQuery 多个checkbox 只选中一个

    <form id="common-form"> <input name="check1" type="checkbox"/ ...