JQuery实现——黑客帝国代码雨效果
效果如你所见就是本页面上方那样的效果
实现方法来自一个印度小伙纸,学习完我也没总结一下,今儿个补上
如何实现,大家右键查看源码复制即可,不过学习的过程还是要总结总结。
下面通过另外两个小例子,一步一步来实现:
第一个:
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <html> 3 <head> 4 5 <title>Do You Know HACKER-1</title> 6 <script 7 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 8 </head> 9 10 <body> 11 <div align="center"> 12 <canvas id="myCanvasMatrix" width="500" height="200" style="border:1px solid #c3c3c3;"> 13 <!-- <canvas>标签在IE9以下的浏览器中并不被支持 --> 14 Please Upgrade your browser 15 </canvas> 16 <br> 17 <button type="button" id="puse">puse</button> 18 <button type="button" id="run">run</button> 19 </div> 20 <script type="text/javascript"> 21 $(document).ready(function() { 22 /* 23 var c2 = document.getElementById("myCanvasMatrix"); 24 var ctx2 = c2.getContext("2d"); 25 其中 'ctx2' 就等同于下面的 'ctx1' 26 */ 27 var ctx1 = $("#myCanvasMatrix").get(0).getContext("2d"); 28 /* 29 其中$("").get(0)表示获取内部的DOM对象引用 30 也就是:获取到对象的dom对象后就可以使用对应的dom API 31 */ 32 /* 33 getContext() 方法返回一个用于在画布上绘图的环境。 34 Canvas.getContext(contextID); 35 其中contextID参数当前唯一的合法值为'2d',也就是支持了二维绘图 36 未来可能会支持'3d'这个参数哦~ 37 */ 38 var Matrix=function(){ 39 /* 40 var my_gradient=ctx1.createLinearGradient(0,0,0,170); 41 my_gradient.addColorStop(0,"black"); 42 my_gradient.addColorStop(1,"white"); 43 ctx1.fillStyle=my_gradient; 44 */ 45 ctx1.fillStyle = 'rgba(0,0,0,.07)'; 46 /* 47 fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。 48 rgba(R,G,B,A) 49 其中'.05'代表阿尔法透明度 50 */ 51 ctx1.fillRect(0,0,500,500); 52 /* 53 fillRect() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充指定的矩形 54 */ 55 ctx1.fillStyle = "#0f0"; 56 ctx1.fillText('zhengbin', Math.random()*(500), Math.random()*(500)); 57 ctx1.fillText('cnblogs', Math.random()*(500), Math.random()*(500)); 58 /* 59 其原理就是不停的产生新的有透明度的背景和要显示的内容, 60 这样新的背景不停的覆盖旧的显示内容 61 新的内容就突显了出来 62 */ 63 }; 64 runFun(); 65 var id; 66 function stopFun(){ 67 clearInterval(id); 68 } 69 function runFun(){ 70 id = setInterval(Matrix,50); 71 /* 72 setInterval() 定义和用法: 73 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。 74 setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。 75 */ 76 } 77 $("button#puse").click(function() { 78 stopFun(); 79 }); 80 $("button#run").click(function() { 81 runFun(); 82 }); 83 }); 84 </script> 85 </body> 86 </html>
第二个:
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <html> 3 <head> 4 5 <title>Do You Know HACKER-2</title> 6 <script 7 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" 8 type="text/javascript"></script> 9 </head> 10 11 <body> 12 <div align="center"> 13 <canvas id="myCanvas" width="500" height="200" style="border:1px solid #c3c3c3;"> 14 Your browser does not support the HTML5 canvas tag. 15 </canvas> 16 <script type="text/javascript"> 17 var YPositions= Array(51).join(0).split(''); 18 /* 19 join() 方法用于把数组中的所有元素放入一个字符串 20 split() 方法用于把一个字符串分割成字符串数组 21 */ 22 var c=document.getElementById("myCanvas"); 23 var ctx=c.getContext("2d"); 24 var draw=function(){ 25 ctx.fillStyle='rgba(0,0,0,.05)'; 26 ctx.fillRect(0,0,500,500); ctx.fillStyle="#0f0"; 27 YPositions.map(function(y,index){ 28 /* 29 map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象 30 */ 31 x = (index*10); 32 ctx.fillText(parseInt(Math.random()*10), x, y); 33 /* 34 在(x,y)坐标位产生一个'a'字符 35 index为Ypositions的下标 36 */ 37 if(y>500) { 38 YPositions[index]=0; 39 } else { 40 YPositions[index]=y+10; 41 } 42 /* 43 如果新产生的字符已经到了<canvas>的辩解 44 那么就使产生下一个新字符的位置回归到原点 45 */ 46 }); 47 }; 48 setInterval(draw,30); 49 </script> 50 </body> 51 </html>
好啦,想必聪明的你已经清楚要怎么做,就不啰嗦啦
最后
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <html> 3 <head> 4 <title>The Matrix</title> 5 <script 6 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" 7 type="text/javascript"></script> 8 <meta charset="utf-8"> 9 <script> 10 /* 11 ① 用setInterval(draw, 33)设定刷新间隔 12 13 ② 用String.fromCharCode(1e2+Math.random()*33)随机生成字母 14 15 ③ 用ctx.fillStyle=’rgba(0,0,0,.05)’; ctx.fillRect(0,0,width,height); ctx.fillStyle=’#0F0′; 反复生成opacity为0.5的半透明黑色背景 16 17 ④ 用x = (index * 10)+10;和yPositions[index] = y + 10;顺序确定显示字母的位置 18 19 ⑤ 用fillText(text, x, y); 在指定位置显示一个字母 以上步骤循环进行,就会产生《黑客帝国》的片头效果。 20 */ 21 $(document).ready(function() { 22 var s = window.screen; 23 var width = q.width = s.width; 24 var height = q.height; 25 var yPositions = Array(300).join(0).split(''); 26 var ctx = q.getContext('2d'); 27 var draw = function() { 28 ctx.fillStyle = 'rgba(0,0,0,.05)'; 29 ctx.fillRect(0, 0, width, height); 30 ctx.fillStyle = 'red'; 31 ctx.font = '10pt Georgia'; 32 yPositions.map(function(y, index) { 33 text = String.fromCharCode(1e2 + Math.random() * 33); 34 x = (index * 10) + 10; 35 q.getContext('2d').fillText(text, x, y); 36 if (y > Math.random() * 1e4) { 37 yPositions[index] = 0; 38 } else { 39 yPositions[index] = y + 10; 40 } 41 }); 42 }; 43 RunMatrix(); 44 function RunMatrix() { 45 Game_Interval = setInterval(draw,30); 46 } 47 }); 48 </script> 49 </head> 50 <body> 51 <div align="center"> 52 <h1>郑州的文武</h1> 53 <canvas id="q" width="500" height="500"></canvas> 54 </div> 55 </body> 56 </html>
转载于:https://www.cnblogs.com/zhengbin/p/5023640.html
JQuery实现——黑客帝国代码雨效果相关推荐
- vbs代码炫酷效果_Python|实现黑客帝国代码雨效果
Python|实现黑客帝国代码雨效果 估计大家都看过电影<黑客帝国>吧,片中的一段代码雨片段实在是炫酷,试想一下,片中的代码雨效果在自己电脑屏幕上实现了会是一种什么样的感觉,会不会有种身临 ...
- python命令数字雨_用Python实现黑客帝国代码雨效果(3种方式)
说起电影<黑客帝国>,相信大部分人都看过或听说过,影片中有一个场景数字雨,如果你看过电影的话,应该对这个经典场景印象深刻,本文我们利用 Python 以数字.字母.图片三种形式来实现这一效 ...
- linux如何安装黑客帝国cmatrix代码雨效果
linux如何安装黑客帝国cmatrix代码雨效果 cmatrix常用命令 cmatrix下载:安装包 具体步骤 源码安装cmatrix 创建/usr/local/temp目录 mkdir -p /u ...
- 代码雨代码源复制_超火!黑客帝国代码雨
黑客帝国代码雨 相信看过<黑客帝国>的同学,对上面的的这个图片一定不陌生,这是一个非常经典的画面.在繁忙的工作之余,大家也要放松下自己,今天就给大家分享一下代码滚动的实现方法. 第一步,新 ...
- 实现黑客帝国数字雨效果
今日闲得慌,折腾了一个黑客帝国数字雨效果,还蛮不错的. 操作:新建一个文本文档,输入 以下代码,再将扩展名修改为 Bat,运行即可. 命令提示符代码:(0-1) @echo off title 黑客帝 ...
- 抖音黑客帝国代码雨——程序大神如何攻占抖音?简直不可思议!
在普通人的脑补中,程序员可能是这样的 不知道为什么,这张图总是能莫名触发技哥的笑点. 亦或是这样的 每天无休止的与代码和Bug打着交道-- 等等,这好像不对啊.当初看黑客帝国的时候可不是这么心酸的,看 ...
- <黑客帝国-代码雨>超火(免费送)
(刚学的,还有好多地方做的不完善,后期继续跟进,直接复制代码,后缀名改为:.html ,直接运行就可以看到效果啦!) 或者:使用HBuilder,创建HTML文件直接运行即可看到效果! <!DO ...
- Canvas修行之黑客帝国代码雨
既然是修行,不卖弄关子,不吊胃口,修行成果必须先晒一晒. 下图是我用canvas画的黑客帝国代码雨,想起当年看黑客帝国时,那个代码雨场景让我心旷神怡,大开脑洞,满脑子是那种三维空间,无数0和1像雨一样 ...
- 黑客帝国代码雨JS,支持中文
有人要的HTML-JS版黑客帝国代码雨,支持自定义文字中文,保存HTML文件可运行. <!DOCTYPE html> <html lang="zh"> &l ...
最新文章
- uniapp处理IOS底部横条安全区域
- 1075 PAT Judge (25 分)【难度: 一般 / 知识点: 多关键字排序】
- C++与Java多态的区别
- RabbitMq topic
- python3 collections数据类型模块
- java去掉图片上的meta信息_正确的java 8设置用于类卸载(Metaspace清理)/ cxf问题
- Lucene中的各种consumer
- 【数据结构实验题】0/1背包问题的递归求解(注意输出所选物品下标的方法)
- 《高质量程序设计指南:C++/C语言》图书信息
- 《编码的奥秘》读后感
- imx6ul:uboot-2013.10启动过程解析
- PLSQL调整SQL字体大小
- java swing 显示图片_Swing显示图片
- 【Unity】OnePieceFTG(五)游戏流程
- torch.Tensor详解
- android仿微信点击好友,安卓开发仿微信联系人列表-机器人列表视图仿微通道聊天多久最底部滑动...
- Linux常用命令个人记录
- C语言学习笔记01:C语言基础语法_变量类型_类型转换
- flutter限制数字输入
- [测试]测测你是左脑发达还是右脑发达
热门文章
- C#进行Visio开发的事件处理
- 26 fps 的视频超分辨率模型 DAP!在线输出720P视频
- NeurIPS 2021 Spotlight | PCAN: 高效时序建模, 提升多目标追踪与分割性能
- 【实习】同方威视南京研发中心招聘图像算法工程师
- 微软沈向洋自述:在实现职业目标的道路上,我得到了七个教训
- Python 入门到精通(—)初识Python
- C语言读取图像像素坐标,求指导,如何用c语言实现读取*.raw格式图像
- 计算机视觉论文-2021-05-11
- 学习 |《神经网络与深度学习》的讲义
- 带你自学Python系列(九):input函数和程序循环四维导图导图