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

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

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

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

　　第一个：

 <%@ 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实现——黑客帝国代码雨效果的更多相关文章

  1. JAVA实现黑客帝国代码雨效果

    import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import j ...

  2. Canvas修行之黑客帝国代码雨

    既然是修行,不卖弄关子,不吊胃口,修行成果必须先晒一晒. 下图是我用canvas画的黑客帝国代码雨,想起当年看黑客帝国时,那个代码雨场景让我心旷神怡,大开脑洞,满脑子是那种三维空间,无数0和1像雨一样 ...

  3. theMatrix代码雨效果

    做了一个代码雨效果放在个人主页:  https://lanleilin.github.io/lanGallery/index.html 代码: <!DOCTYPE html> <ht ...

  4. CentOS7 部署黑客帝国代码雨

    1024程序猿的节日,搞一个黑客帝国画面玩玩 [root@localhost ~]# yum -y install ncurses-devel [root@localhost ~]# yum -y i ...

  5. 黑客帝国雨效果JS

    黑客帝国雨效果JS. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  6. [C#]使用 C# 代码实现拓扑排序 dotNet Core WEB程序使用 Nginx反向代理 C#里面获得应用程序的当前路径 关于Nginx设置端口号，在Asp.net 获取不到的，解决办法 .Net程序员 初学Ubuntu ，配置Nignix 夜深了，写了个JQuery的省市区三级级联效果

    [C#]使用 C# 代码实现拓扑排序   目录 0.参考资料 1.介绍 2.原理 3.实现 4.深度优先搜索实现 回到顶部 0.参考资料 尊重他人的劳动成果,贴上参考的资料地址,本文仅作学习记录之用. ...

  7. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  8. 深入学习jQuery的三种常见动画效果

    × 目录 [1]显隐效果 [2]高度变化 [3]淡入淡出 前面的话 动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画 ...

  9. jQuery图片旋转展示收缩效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Open Phone, SMS, Email, Skype and Browser apps of Android in Unity3d

    最近项目需要使用Android的一些基本功能,写插件各种悲剧,google了一下,如获至宝.Nice ! string url = String.Format("tel:{0}", ...

  2. What are Scopes?

    scope is an object that refers to the application model. It is an execution context for expressions. ...

  3. Mac OS X 快捷键（完整篇） 转载

    转载自:http://www.nooidea.com/2011/01/mac-os-x-keyboard-shortcuts.html 快捷键是通过按下键盘上的组合键来调用 Mac OS X 功能的一 ...

  4. java Hotspot 内存管理白皮书(中文翻译)

    转自: http://my.oschina.net/u/568779/blog/166891 1引言 一个健壮的 Java™2平台,Standard Edition (J2SE™)拥有一个自动内存管理 ...

  5. hdu 1796 How many integers can you find

    容斥原理!! 这题首先要去掉=0和>=n的值,然后再使用容斥原理解决 我用的是数组做的…… #include<iostream> #include<stdio.h> #i ...

  6. hdu 1452 Happy 2004

    因子和: 的因子是1,2,3,6; 6的因子和是 s(6)=1+2+3+6=12; 的因子是1,2,4,5,10,20; 20的因子和是 s(20)=1+2+4+5+10+20=42; 的因子是1,2 ...

  7. IText 生成页脚页码

    做doc文档报表的时候可能遇到这样的需求: 每一个页面需要页码,用IText可以完成这样的需求. IText生成doc文档需要三个包:iTextAsian.jar,iText-rtf-2.1.4.ja ...

  8. Unity UGUI —— 鼠标穿透UI问题（Unity官方的解决方法）

    解决方案 : http://www.cnblogs.com/fly-100/p/4570366.html 这里我们直接在使用Input.GetMouseButtonDown(0)的地方加了一个检测函数 ...

  9. java 泛型类

     Java泛型中的标记符含义:  E - Element (在集合中使用,因为集合中存放的是元素) T - Type(Java 类) K - Key(键) V - Value(值) N - Numbe ...

  10. Larave 多图片上传

    首先使用Dropzone.js前端组件 {{ HTML::style('css/basic.css');}} {{ HTML::script('js/dropzone.js') }} form部分只需 ...