<html> <head> <title>The Matrix</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <meta charset="utf-8"> <script> /* ① 用setInterval(draw, 33)设定刷新间隔 ② 用String.fromCharCode(1e2+Math.random()*33)随机生成字母 ③ 用ctx.fillStyle=’rgba(0,0,0,.05)’; ctx.fillRect(0,0,width,height); ctx.fillStyle=’#0F0′; 反复生成opacity为0.5的半透明黑色背景 ④ 用x = (index * 10)+10;和yPositions[index] = y + 10;顺序确定显示字母的位置 ⑤ 用fillText(text, x, y); 在指定位置显示一个字母 以上步骤循环进行，就会产生《黑客帝国》的片头效果。 */ $(document).ready(function () { var s = window.screen; var width = q.width = s.width; var height = q.height; var yPositions = Array(300).join(0).split(''); var ctx = q.getContext('2d'); var draw = function () { ctx.fillStyle = 'rgba(0,0,0,.05)'; ctx.fillRect(0, 0, width, height); ctx.fillStyle = 'red'; ctx.font = '10pt Georgia'; yPositions.map(function (y, index) { text = String.fromCharCode(1e2 + Math.random() * 33); x = (index * 10) + 10; q.getContext('2d').fillText(text, x, y); if (y > Math.random() * 1e4) { yPositions[index] = 0; } else { yPositions[index] = y + 10; } }); }; RunMatrix(); function RunMatrix() { Game_Interval = setInterval(draw, 30); } }); </script> </head> <body> <div align="center"> <canvas id="q" width="500" height="500"></canvas> </div> </body> </html>

三种比较好玩的黑客效果JS代码（摘取）的更多相关文章

  1. 右上角鼠标滑过展开收缩动画效果js代码的演示页面

    http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...

  2. 三种执行SQL语句的的JAVA代码

    问题描述: 连接数据库,执行SQL语句是必不可少的,下面给出了三种执行不通SQL语句的方法. 1.简单的Statement执行SQL语句.有SQL注入,一般不使用. public static voi ...

  3. Qt之窗体透明 （三种不同的方法和效果）

    关于窗体透明,经常遇到,网上的资料倒不少,也不知道写的时候是否验证过,很多都不正确...今天就在此一一阐述!       以下各效果是利用以前写过的一个小程序作为示例进行讲解!(代码过多,贴主要部分) ...

  4. 【网上转载搜罗】本博客花里胡哨（划掉）效果js代码

    <canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;poin ...

  5. jquery实现页面控件拖动效果js代码

    ;(function($) { var DragPanelId = "divContext"; var _idiffx = 0; var _idiffy = 0; var _Div ...

  6. 利用ajax获取到的网页源码不能执行js代码

    今天觉得我的博客中加载腾讯微博的速度很慢,所以就想改写为js,本来以为直接新建一个页面,把获取函数移到新的页面中,原来的页面只要使用xmlhttp去GET一下,然后把div的innerhtml属性等于 ...

  7. 三种CSS方法实现loadingh点点点的效果

    我们在提交数据的时候,在开始提交数据与数据提交成功之间会有一段时间间隔,为了有更好的用户体验,我们可以在这个时间段添加一个那处点点点的动画,如下图所示: 汇总了一下实现这种效果主要有三种方法: 第一种 ...

  8. 应对加密js的三种方法

    经常遇到网页在登录后会对用户输入的帐号和密码通过js进行加密,导致模拟登录这类网站时受到阻碍 这里小记一下当前解决该问题的三种方法 1.利用python实现js同等加密. 2.利用selenium模拟 ...

  9. jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画

    地狱的镰刀 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){ ...

随机推荐

  1. Codeforces_739_B

    http://codeforces.com/problemset/problem/739/B dfs,记录距离前缀和,每次找到离最近的不符合的点. #include<iostream> # ...

  2. HDU_5094_dfs

    http://acm.hdu.edu.cn/showproblem.php?pid=5094 bfs,vis[x][y][z],z表示钥匙的状态,用二进制来表示,key[x][y]储存当前位置钥匙的二 ...

  3. 脚本、脚本语言、shell脚本

    脚本是批处理文件的延伸,是一种纯文本保存的程序,一般来说的计算机脚本程序是确定的一系列控制计算机进行运算操作动作的组合,在其中可以实现一定的逻辑分支等.脚本程序相对一般程序开发来说比较接近自然语言,可 ...

  4. 关于JAVA中源码级注解的编写及使用

    一.注解简介: 1.1.什么是"注解": ​ 在我们编写代码时,一定看到过这样的代码: class Student { private String name; @Override ...

  5. 使用 Visual Studio 2015 + Python3.6 + tensorflow 构建神经网络时报错：'utf-8' codec can't decode byte 0xcc in position 78: invalid continuation byte

    使用 Visual Studio 2015 + Python3.6 + tensorflow 构建神经网络时报错:'utf-8' codec can't decode byte 0xcc in pos ...

  6. GitBook安装部署实操手册

    前言 GitBook是一个基于Node.js的命令行工具,可使用Git和Markdown来编写文档,赞誉太多,不再赘述. Node.js 下载安装包 cd /tmp wget https://node ...

  7. CP - OFDM

  8. VFP检测SQL Server的五个实例代码

    ** 需要指出的是,无论下面哪种方式的代码,都需要打开本机的网络共享,否则找不到SQL服务器** 例一 ************************************************ ...

  9. C#中HashSet的重复性与判等运算重载

    目录 一个故事-- 一个繁荣的遥远国度:泛型容器 但是我也不确定容器里能放些什么东西啊 一个英勇的皇家骑士:HashSet 值类型的HashSet 引用类型的HashSet 另外一个--故--事?? ...

  10. lua 打印一个table的实现

    print("-------------Test-----------------") local tb = {} function printProperties(t, csp) ...