JQuery实现——黑客帝国代码雨效果

效果如你所见就是本页面上方那样的效果

实现方法来自一个印度小伙纸，学习完我也没总结一下，今儿个补上

如何实现，大家右键查看源码复制即可，不过学习的过程还是要总结总结。

下面通过另外两个小例子，一步一步来实现：

　　第一个：

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

 <html>

 <head>

 <title>Do You Know HACKER-1</title>

 <script

     src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

 </head>

 <body>

 <div align="center">

     <canvas id="myCanvasMatrix" width="500" height="200" style="border:1px solid #c3c3c3;">

     <!-- <canvas>标签在IE9以下的浏览器中并不被支持 -->

         Please Upgrade your browser

     </canvas>

     <br>

     <button type="button" id="puse">puse</button>

     <button type="button" id="run">run</button>

     </div>

     <script type="text/javascript">

         $(document).ready(function() {

         /*

             var c2 = document.getElementById("myCanvasMatrix");

             var ctx2 = c2.getContext("2d");

             其中 'ctx2' 就等同于下面的 'ctx1'

         */

         var ctx1 = $("#myCanvasMatrix").get(0).getContext("2d");

         /*

             其中$("").get(0)表示获取内部的DOM对象引用

             也就是：获取到对象的dom对象后就可以使用对应的dom API

         */

         /*

             getContext() 方法返回一个用于在画布上绘图的环境。

             Canvas.getContext(contextID);

             其中contextID参数当前唯一的合法值为'2d'，也就是支持了二维绘图

             未来可能会支持'3d'这个参数哦~

         */

         var Matrix=function(){

             /*

                 var my_gradient=ctx1.createLinearGradient(0,0,0,170);

                 my_gradient.addColorStop(0,"black");

                 my_gradient.addColorStop(1,"white");

                 ctx1.fillStyle=my_gradient;

             */

             ctx1.fillStyle = 'rgba(0,0,0,.07)';

             /*

                 fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。

                 rgba(R,G,B,A)

                 其中'.05'代表阿尔法透明度

             */

             ctx1.fillRect(0,0,500,500);

             /*

                 fillRect() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充指定的矩形

             */

             ctx1.fillStyle = "#0f0";

             ctx1.fillText('zhengbin', Math.random()*(500), Math.random()*(500));

             ctx1.fillText('cnblogs', Math.random()*(500), Math.random()*(500));

             /*

                 其原理就是不停的产生新的有透明度的背景和要显示的内容，

                 这样新的背景不停的覆盖旧的显示内容

                 新的内容就突显了出来

             */

         };

         runFun();

         var id;

         function stopFun(){

             clearInterval(id);

         }

         function runFun(){

             id = setInterval(Matrix,50);

         /*

            setInterval() 定义和用法:

            setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

            setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

         */

         }

         $("button#puse").click(function() {

             stopFun();

         });

         $("button#run").click(function() {

             runFun();

         });

     });

     </script>

 </body>

 </html>

　　第二个：

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

 <html>

 <head>

 <title>Do You Know HACKER-2</title>

 <script

     src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"

     type="text/javascript"></script>

 </head>

 <body>

     <div align="center">

         <canvas id="myCanvas" width="500" height="200" style="border:1px solid #c3c3c3;">

             Your browser does not support the HTML5 canvas tag.

         </canvas>

     <script type="text/javascript">

         var YPositions= Array(51).join(0).split('');

         /*

             join() 方法用于把数组中的所有元素放入一个字符串

             split() 方法用于把一个字符串分割成字符串数组

         */

         var c=document.getElementById("myCanvas");

         var ctx=c.getContext("2d");

         var draw=function(){

             ctx.fillStyle='rgba(0,0,0,.05)';

             ctx.fillRect(0,0,500,500); ctx.fillStyle="#0f0";

             YPositions.map(function(y,index){

             /*

                 map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象

             */

                 x = (index*10);

                 ctx.fillText(parseInt(Math.random()*10), x, y);

             /*

                 在(x,y)坐标位产生一个'a'字符

                 index为Ypositions的下标

             */

                 if(y>500) {

                     YPositions[index]=0;

                 } else {

                     YPositions[index]=y+10;

                 }

             /*

                 如果新产生的字符已经到了<canvas>的辩解

                 那么就使产生下一个新字符的位置回归到原点

              */

             });

         };

         setInterval(draw,30);

     </script>

 </body>

 </html>

好啦，想必聪明的你已经清楚要怎么做，就不啰嗦啦

　　最后

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

 <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">

         <h1>郑州的文武</h1>

         <canvas id="q" width="500" height="500"></canvas>

     </div>

 </body>

 </html>

JQuery实现——黑客帝国代码雨效果的更多相关文章

JAVA实现黑客帝国代码雨效果
import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import j ...
Canvas修行之黑客帝国代码雨
既然是修行,不卖弄关子,不吊胃口,修行成果必须先晒一晒. 下图是我用canvas画的黑客帝国代码雨,想起当年看黑客帝国时,那个代码雨场景让我心旷神怡,大开脑洞,满脑子是那种三维空间,无数0和1像雨一样 ...
theMatrix代码雨效果
做了一个代码雨效果放在个人主页: https://lanleilin.github.io/lanGallery/index.html 代码: <!DOCTYPE html> <ht ...
CentOS7 部署黑客帝国代码雨
1024程序猿的节日,搞一个黑客帝国画面玩玩 [root@localhost ~]# yum -y install ncurses-devel [root@localhost ~]# yum -y i ...
黑客帝国雨效果JS
黑客帝国雨效果JS. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
[C#]使用 C# 代码实现拓扑排序 dotNet Core WEB程序使用 Nginx反向代理 C#里面获得应用程序的当前路径关于Nginx设置端口号，在Asp.net 获取不到的，解决办法 .Net程序员初学Ubuntu ，配置Nignix 夜深了，写了个JQuery的省市区三级级联效果
[C#]使用 C# 代码实现拓扑排序目录 0.参考资料 1.介绍 2.原理 3.实现 4.深度优先搜索实现回到顶部 0.参考资料尊重他人的劳动成果,贴上参考的资料地址,本文仅作学习记录之用. ...
jQuery个性化图片轮播效果
jQuery个性化图片轮播效果购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始两个区域: ...
深入学习jQuery的三种常见动画效果
× 目录 [1]显隐效果 [2]高度变化 [3]淡入淡出前面的话动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画 ...
jQuery图片旋转展示收缩效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

crud springmvc
实体类:Student.java package demo.entity; public class Student { private int id; private String name; pr ...
Const和ReadOnly区别及其用途--转载
常量的概念就是一个包含不能修改的值的变量,常量是C#与大多数编程语言共有的.但是,常量不必满足所有的要求.有时可能需要一些变量,其值不应改变,但在运行之前其值是未知的.C#为这种情形提供了另一个类型的 ...
Sublime Text 3配置与vim模式（待完整）
Sublime Text 3通过设置默认值与用户值的方式,来进行配置.默认值不允许更改,用户值是用户进行配置.同一属性,当用户值存在时,默认值就无效.打开Preference,如图: 先贴下我的Set ...
C# 计算一段代码执行的时间函数
使用 Stopwatch 类 eg: 计算一个for循环需要的时间 Stopwatch watch = new Stopwatch(); watch.Start(); ; i < ; i++) ...
Java程序员学C#基本语法两个小时搞定（对比学习）
对于学习一门新的语言,关键是学习新语言和以前掌握的语言的区别,但是也不要让以前语言的东西,固定了自己的思维模式,多看一下新的语言的编程思想. 1.引包 using System;java用import ...
LINQ——语言级集成查询入门指南(1)
本文主要是对语言级集成查询或简称为LINQ做一个介绍,包括LINQ是什么,不是什么,并对它在语言特性方面做一个简短的回顾,然后举一些使用LINQ的实际例子进行说明. 语言级集成查询是什么? 在我过去写 ...
lintcode 中等题：Maximum Product Subarray 最大连续乘积子序列
题目乘积最大子序列找出一个序列中乘积最大的连续子序列(至少包含一个数). 样例比如, 序列 [2,3,-2,4] 中乘积最大的子序列为 [2,3] ,其乘积为6. 解题法一:直接暴力求解时 ...
Project Euler 76：Counting summations
题目链接原题: It is possible to write five as a sum in exactly six different ways: 4 + 13 + 23 + 1 + 12 + ...
如何在服务（Service）程序中显示对话框
原文:http://www.vckbase.com/index.php/wv/94 服务程序(Service)一般是不能和用户进行交互的,所以他一般是不能显示窗口的.要和用户进行交互(如显示窗口),我 ...
Linux开机启动流程
开机过程指的是从打开计算机电源直到LINUX显示用户登录画面的全过程: 1)加载BIOS 2)读取MBR 3)Boot Loader 4)加载内核 ...

JQuery实现——黑客帝国代码雨效果

效果如你所见就是本页面上方那样的效果

实现方法来自一个印度小伙纸，学习完我也没总结一下，今儿个补上

如何实现，大家右键查看源码复制即可，不过学习的过程还是要总结总结。

下面通过另外两个小例子，一步一步来实现：

第一个：

第二个：

好啦，想必聪明的你已经清楚要怎么做，就不啰嗦啦

最后

JQuery实现——黑客帝国代码雨效果的更多相关文章

随机推荐

热门专题

　　第一个：

　　第二个：

　　最后