<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. C++ 中库函数bsearch的简单研究（含示例）

    /**//*bsearch函数声明如下: void *bsearch(const void *key, const void *base, size_t *nelem,                 ...

  2. Head First设计模式分析学习

    永不放弃的毅力,和对欲望的控制. 注意:要能够理解相类似的设计模式之间的区别和不同.可以把类比列举出来,加深记忆. 是否加入Spring容器中的标准是是否要用到Spring框架的方法或者功能特性,如事 ...

  3. angular 控件间的通信

    先引入 设置meta元素 http://blog.sina.com.cn/s/blog_51048da70101cgea.html //设置 虚拟窗口的大小等于设备的大小 <meta name= ...

  4. php 截取字符串长度 并 把超出规定长度的内容用...替代

    <?php header("content-type:text/html;charset=utf-8");#设置文件编码 error_reporting(E_ALL);#设置 ...

  5. lwip eth插拔网线自动维护接口状态

    硬件连线就是将dp83848的INT脚连到STM32的某个中断脚上,这里是PB14 PB14的中断处理函数中,会释放一个信号量,这里只是发生链路状态改变中断(网线插上或拔下) void EXTI15_ ...

  6. css吃豆人动画

    一. Css吃豆人动画 1. 上半圆:两个div,内部一个圆div,外部设置宽高截取半圆 外部div动画:animation: 动画样式 1s(时长) ease(动画先低速后快速) infinite( ...

  7. zabbix-agentd配置文件详解

    agent 端配置文件路径 :/etc/zabbix/zabbix_agentd.conf PidFile=/var/run/zabbix/zabbix_agentd.pid #<===指定pi ...

  8. 数组和CLR-非常特殊的关系

    目录 数组和CLR-非常特殊的关系 公共语言运行时(CLR)的基础 内存和类型安全 实现细节 特殊帮助器类 移除边界检查 分配数组 运行时以不同的方式对待数组 进一步阅读 数组源码引用 参考文档 数组 ...

  9. Arm开发板+Qt学习之路-析构函数和对话框一起时

    先记录一下代码 一:先将指针释放掉,在显示对话框 void MainWindow::canResponseError(SendCanMsgThread *sendCanMsgThread ){ std ...

  10. OpenJDK 64-Bit Server VM warning: INFO: os::commit_memory(0x00000000c0000000, 1073741824, 0) failed; error='Out of memory' (errno=12)

    使用docker 安装kafka时启动失败 查看报错日志 # docker logs --since 30m 71846a96e514 Excluding KAFKA_HOME from broker ...