<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. 脚本、脚本语言、shell脚本

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

  2. LNK2019

    原因:inline函数被外部文件的函数调用时,必须将inline函数定义在头文件中,不能定义在cpp文件中.

  3. java架构之路-（微服务专题）ribbon的基本使用和内部算法的自我实现

    上次回归: 上次我们主要说了,我们的注册中心nacos的使用,如我们的命名空间.分组.集群.版本等是如何使用的,如果是这样呢?我们现在有三个用户服务和三个订单服务,我们应该如何分发这些请求呢?都请求到 ...

  4. python学习Day27--time模块、sys模块、os模块和序列化模块

    [知识点] 1.时间模块: (1)时间戳时间,格林威治时间,float数据类型 英国伦敦的时间:1970.1.1     0:0:0 北京时间:1970.1.1     8:0:0 (2)结构化时间, ...

  5. NR / 5G - Polar Coding

    5G New Radio Polar Coding Introduction The selection of polar codes as the channel coding technique ...

  6. logstash 配置文件语法

    需要一个配置文件 管理输入.过滤器和输出相关的配置.配置文件内容格式如下: # 输入 input { ... } # 过滤器 filter { ... } # 输出 output { ... } 先来 ...

  7. centos7安装node.js

    安装版本:node-v10.15.3 一.安装必要的编译软件包 # yum install gcc gcc-c++ -y 二.从源码下载Nodejs 进入官网选择自己需要的版本 https://nod ...

  8. bootstrap--font-face问题

    在做仿天猫项目时,预期 已经用cdn加载bootstrap,但是不显示文字图标:实际情况: 发现是引用bootstrap的版本导致的.4.0.0版本及以后的css源码中找不到@font-face.可以 ...

  9. Pythone是什么鬼？

    认识 Python 人生苦短,我用 Python -- Life is short, you need Python 目标 Python 的起源 为什么要用 Python? Python 的特点 Py ...

  10. webapi+Quartz.NET解决若干定时程序同时运行的问题

    项目现状: 有若干定时程序需要自启动运行,为了简便程序部署等问题,采取这种办法把定时程序集中管理到webapi中跟随api发布 代码架构介绍: 新建一个类库,类库引用Quartz(Quartz.2.3 ...