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

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

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

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

　　第一个：

 <%@ 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. Eclipse下PHP开发 插件安装

    PHPeclipse是什么? PHPeclipse是Eclipse的一个插件,它为php开发人员提供了一个集成的开发环境.Eclipse官方下载地址:http://www.eclipse.org/ P ...

  2. 01-03-02-2【Nhibernate (版本3.3.1.4000) 出入江湖】CRUP操作-Save方法的一些问题

    此文由于当时不知道NHibernate的Sava方法不是更新操作,不知道Save就是Add,造成如下荒唐的求证过程,但结论是对的 ,可报废此文,特此声明. NHibernate--Save方法: Cu ...

  3. 转：[gevent源码分析] 深度分析gevent运行流程

    [gevent源码分析] 深度分析gevent运行流程 http://blog.csdn.net/yueguanghaidao/article/details/24281751 一直对gevent运行 ...

  4. Spring @ Component 的作用

    1.@controller 控制器(注入服务) 2.@service 服务(注入dao) 3.@repository dao(实现dao访问) 4.@component (把普通pojo实例化到spr ...

  5. abs(INT_MAX-(-1))

    写一个程序,结果总是不对,check逻辑好几遍也没发现错误,无奈之下debug.发现一个有趣的现象abs(INT_MAX-(-1))返回值是-2147483648.于是看了下abs函数的代码实现. i ...

  6. Genymotion加载so出错解决方案

    通过网上所搜得出结论: Genymotion是x86的架构,而我们的so库是arm架构的 解决:安装Genymotion-ARM-Translation.zip 1.下载:http://pan.bai ...

  7. python—命名规范（转）

    文件名全小写,可使用下划线 包应该是简短的.小写的名字.如果下划线可以改善可读性可以加入.如mypackage. 模块与包的规范同.如mymodule. 类总是使用首字母大写单词串.如MyClass. ...

  8. lintcode ：Remove Duplicates from Sorted Array 删除排序数组中的重复数字

    题目: 删除排序数组中的重复数字 给定一个排序数组,在原数组中删除重复出现的数字,使得每个元素只出现一次,并且返回新的数组的长度. 不要使用额外的数组空间,必须在原地没有额外空间的条件下完成.  样例 ...

  9. 52. N-Queens II

    题目: Follow up for N-Queens problem. Now, instead outputting board configurations, return the total n ...

  10. shell脚本 -d 是目录文件，那么-e，-f等说明

    -e filename 如果 filename存在,则为真 -d filename 如果 filename为目录,则为真 -f filename 如果 filename为常规文件,则为真 -L fil ...