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

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

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

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

　　第一个：

 <%@ 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. specular map normal map gloss map

    http://www.marmoset.co/toolbag/learn/materials http://digitalerr0r.wordpress.com/2009/03/26/xna-shad ...

  2. NGUI屏幕自适应解决方案

    NGUI研究院之自适应屏幕 http://www.xuanyusong.com/archives/2536 Unity3D研究院之使用Android的硬件缩放技术优化执行效率 http://www.x ...

  3. POJ 3104

    Drying Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 7959   Accepted: 2014 Descriptio ...

  4. hdu 1271 整数对

    看了别人的解题报告a了, 大致思路就是 A=a+b*10^k+c*10^(k+1) B=a+c*10^k (在A中取出一位数后) N=A+B=2*a+b*10^k+11*c*10^k 这样就好做了,再 ...

  5. HTTP 408请求超时错误解决办法

    错误描述 对于大多数网站而言,我们所看到的错误消息已经是开发者定制过的页面,比如我们最常见的自定义404错误页面,一般而言,我们看到的408错误应该是类似这样的提示:“408:Request Time ...

  6. lintcode 中等题：majority number III主元素III

    题目 主元素 III 给定一个整型数组,找到主元素,它在数组中的出现次数严格大于数组元素个数的1/k. 样例 ,返回 3 注意 数组中只有唯一的主元素 挑战 要求时间复杂度为O(n),空间复杂度为O( ...

  7. lintcode ：Reverse Words in a String 翻转字符串

    题目: 翻转字符串 给定一个字符串,逐个翻转字符串中的每个单词. 样例 给出s = "the sky is blue",返回"blue is sky the" ...

  8. eclipse中（装了插件m2eclipse后的）导入maven工程显示"感叹号"

      有时候导入一些开源工程(maven结构的),在eclipse中(装了插件m2eclipse后的)该工程前面会有一个小的红色感叹号,但点开工程后没有发现有打小红叉的内容,这种情况其实大部分是jar包 ...

  9. 客户端一个http连接包含两个方向，一个是这个http连接的输入，另一个是这个http连接的输出。

    1.客户端一个http连接包含两个方向,一个是这个http连接的输入,另一个是这个http连接的输出. 利用httpclient进行ip地址和端口号连接后,http的输出端作为http请求参数设置.h ...

  10. Android：调试之DDMS

    DDMS 的全称是Dalvik Debug Monitor Service,是 Android 开发环境中的Dalvik虚拟机调试监控服务. 在Eclipse,项目启动了虚拟器后,右上角选择Open ...