JS特效——黑客效果JS代码（摘取）
2024-05-29 19:13:45
示例一
<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"><canvas id="q" width="500" height="500"></canvas></div>
</body>
</html>示例二
<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="1024" height="800" 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, 1024, 800); 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>示例三
<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>示例四
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"></head><body><canvas id="content" width="1250px" height="602px"></canvas></body></html><script>var cav = document.getElementById('content');var w = window.screen.width;var h = window.screen.height;var yPositions = Array(300).join(0).split('');var ctx = cav.getContext('2d');var draw = function(){ctx.fillStyle = 'rgba(0,0,0,.05)';ctx.fillRect(0,0,w,h);ctx.fillStyle = 'green';ctx.font = '20px';yPositions.map(function(y,index){text = String.fromCharCode(1e2+Math.random()*330);x = index*10;cav.getContext('2d').fillText(text,x,y);if(y>Math.random()*1e4){yPositions[index]=0;}else{yPositions[index]=y+10;}});}setInterval('draw()',30);</script>参考文章
https://www.cnblogs.com/fenger-VIP/p/7651562.html
JS特效——黑客效果JS代码（摘取）相关推荐
- 分享112个JS特效动画效果，总有一款适合您
分享112个JS特效动画效果,总有一款适合您 112个JS特效动画效果下载链接:https://pan.baidu.com/s/1uC61pccye_oYqBnUugIuig?pwd=u21z 提取 ...
- 分享113个JS特效动画效果，总有一款适合您
分享113个JS特效动画效果,总有一款适合您 113个JS特效动画效果下载链接:https://pan.baidu.com/s/1k0fyflcyTKQM9pYEif2f9g?pwd=hpa8 提取 ...
- 分享114个JS特效动画效果，总有一款适合您
分享114个JS特效动画效果,总有一款适合您 114个JS特效动画效果下载链接:https://pan.baidu.com/s/18_NR3eaxDddWSHqAbMYiuw?pwd=m25p 提取 ...
- 分享116个JS特效动画效果，总有一款适合您
分享116个JS特效动画效果,总有一款适合您 116个JS特效动画效果下载链接:https://pan.baidu.com/s/1E3s1PAcOw-8dCCnq9NUeUw?pwd=tjl2 提取 ...
- 分享92个JS特效动画效果，总有一款适合您
分享92个JS特效动画效果,总有一款适合您 92个JS特效动画效果下载链接:https://pan.baidu.com/s/1C_b7PM8E8WUpNMethPGtbQ?pwd=r3f8 提取码: ...
- 分享111个JS特效动画效果，总有一款适合您
分享111个JS特效动画效果,总有一款适合您 111个JS特效动画效果下载链接:https://pan.baidu.com/s/1s8mWkRlIZML2t5v1g1rlDA?pwd=pe5p 提取 ...
- JS拖拽效果，代码精干，通俗易懂！
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html> <html> <head> <meta charse ...
- js 特效 手风琴效果
$(document).ready(function(){ //定义展开的块 var lastBlock = $('#a1'); //展开的块的宽度 var maxWidth = 406; //折叠的 ...
- 【六祎-JS特效】页面JS特效背景
JS代码 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UT ...
最新文章
- LoadRunner之二“集合点”
- 自学python需要买书吗-我的孩子需要学习Python吗？几岁开始学？有什么书籍推荐？...
- Java基础——左移和右移
- IBM的大数据就是返朴归真
- MongoDB学习笔记Day3
- c语言作业答案N个公约数公倍数,c语言程序题，输入两个正整数m和n，求其最大公约数和最小公倍数。...
- 大厂技术文档：Python 基础+爬虫+数据分析+面试经精选
- c语言编程吉他和弦,学吉他和弦怎么弹啊？就C大调C,Dm,Em,F,G,Am,Bdim.1，2，3，4，5，6，7级和弦举个简单的例帮帮我...
- 检查等高线矛盾lisp_依仁测绘工具V1.0 整理了一个配合cass绘图的程序-依仁测绘工具 联合开发网 - pudn.com...
- 【立贴为证】二十年后2027，百度眼必然成人眼一个
- exe后门程序生成之Quasar
- 小米android通知栏图标不显示,MIUI开发版更新：已修复原生样式下部分通知图标不显示的问题...
- 数据分析面试必考的AB-Test详解
- 编写程序，输入本金、年利率和年份，计算复利（结果保留2位小数）
- VMware14-15安装MAC
- html avatar属性,动画混合问题，Avatar动画混合报错.
- STC15单片机-按键检测单击、双击和长按(状态机)
- slurm(一) —— 简介
- eclipse导入项目出现红色感叹号怎么办
- 扎堆智能修图，美图们“试错”之道能否走通？
热门文章
- php中怎么过滤器_PHP 过滤器
- dw网页设计期末设计一个网页_制作网站与设计网页可以用什么软件？
- java语言程序设计你_清华大学出版社-图书详情-《Java语言程序设计》
- c libxml2解析html,简单的libxml2 HTML解析示例,使用Objective-c,Xcode和HTMLparser.h
- php date 毫秒_高性能的PHP日志系统 SeasLog 使用
- mysql 复杂sql 面试_PHP面试之复杂MySQL语句的编写
- android studio cmake opencv_Mac下安装及配置OpenCV环境（Xcode）
- python 乱码转码_Python解决乱码问题
- Vue 学习第五天 学习笔记
- 48小时单GPU训练DistilBERT！这个检索模型轻松达到SOTA