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

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

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

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

　　第一个：

 <%@ 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. [C/CPP系列知识] C++中extern “C” name mangling -- Name Mangling and extern “C” in C++

    http://www.geeksforgeeks.org/extern-c-in-c/ C++函数重载(function overloading),但是C++编译器是如何区分不同的函数的呢?----是 ...

  2. javax.mail.MessagingException: 501 Syntax: HELO hostname Linux端异常解决

    在项目里面使用javamail在window环境正常,放在服务器上面的时候抛出异常javax.mail.MessagingException: 501 Syntax: HELO hostname ,原 ...

  3. ASP .NET 如何在 SQL 查询层面实现分页

    [编者按]本文作者为来自巴基斯坦的软件开发工程师 Aqeeel,主要介绍了在 SQL 查询层面实现 ASP.NET 应用的分页方法. 本文系 OneAPM 工程师编译呈现,以下为正文. GridVie ...

  4. Observer Pattern

    Motivation We can not talk about Object Oriented Programming without considering the state of the ob ...

  5. MSVC CRT运行库启动代码分析

    原文链接:http://www.programlife.net/msvc-crt-startup.html 在程序进入main/WinMain函数之前,需要先进行C运行库的初始化操作,通过在Visua ...

  6. Javascript表格中搜索

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. NET 使用HtmlAgilityPack抓取网页数据

    刚刚学习了XPath路径表达式,主要是对XML文档中的节点进行搜索,通过XPath表达式可以对XML文档中的节点位置进行快速定位和访问,html也是也是一种类似于xml的标记语言,但是语法没有那么严谨 ...

  8. 关于in与exists的效率讨论

    关于in与exists的效率讨论1).select * from A where id in (select id from B)以上查询使用了in语句,in只执行一次,他查出B表的所有id字段并缓存 ...

  9. WCF入门（五）---创建WCF服务

    使用Microsoft Visual Studio2012创建WCF服务,理解如下所有必要的编码,更好地创建WCF服务的概念,这里做一个简单的任务. 启动Visual Studio 2012. 单击新 ...

  10. NSArray 利用数组创建数组

    NSArray *array=[NSArray arrayWithObjects:@"1",@"2",@"3", nil];         ...