分享JS四种好玩的黑客背景效果代码
目录
- 示例一
- 示例二
- 示例三
- 示例四
示例一
<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代码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JS实现黑客帝国文字下落效果
代码一: 黑客帝国文字下落效果 查看效果 源码下载 源代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>黑客帝国文字下落</title> <style> html, body {margin:0; padding:0; background-color:#000;} #divList {width:800px; h
-
JS画布动态实现黑客帝国背景效果
本文实例为大家分享了JS画布动态实现黑客帝国背景效果的具体代码,供大家参考,具体内容如下 效果图 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
-
js仿黑客帝国字母掉落效果代码分享
看过黑客帝国的朋友或许都对开头的字幕效果很熟悉,自从影片播放以来,网页设计者有不少都在模仿这种字母掉落的效果,而且最后还有文字显现效果"I love you",你可以稍加修改,在情人节,用来对你的恋人表白哦~ 运行效果图: 大家也动手运行一下, ----------------效果演示---------------- 为大家分享js仿黑客帝国字母掉落效果代码如下 <head> <meta htt
-
HTML+JS实现“代码雨”效果源码（黑客帝国文字下落效果）
我们先看看HTML+JS实现"代码雨"的最终效果 1.绿色: 2.彩色: 3.背景色: 4.绿色逐渐变浅: 源代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Code -by ZhenYu.Sha</title>
-
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
先看看JS+CSS+HTML实现"代码雨"类似黑客帝国文字下落最终效果: HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/ok.css" rel="external nofo
-
分享JS四种好玩的黑客背景效果代码
目录 示例一 示例二 示例三 示例四 示例一 <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="
-
Android 实现监听的四种方法详解实例代码
直接上代码,大家可以参考下 (1)自身类作为事件监听器 package cn.edu.gdmec.s07150745.work5; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.Toast; public class MainActivit
-
js新浪首页可关闭背景效果代码
新浪首页可关闭背景效果代码 if(typeof(sina)!="object"){var sina={}} sina.$=function(i){if(!i){return null} return document.getElementById(i)};var sinaFlash=function(V,x,X,Z,v,z,i,c,I,l,o){var w=this;if(!document.createElement||!document.getElementById){return
-
js 3种归并操作的实例代码
第一种: 复制代码 代码如下: /**良哥的*/function merge(a, b) { var aLen = a.length, bLen = b.length, maxLen = Math.max(aLen, bLen), sumLen = aLen + bLen, result = [], ap = 0, bp = 0; while (result.length < sumLen) {
-
.NET异步编程总结----四种实现模式代码总结
最近很忙,既要外出找工作又要兼顾老板公司的项目.今天在公司,忙里偷闲,总结一下.NET中的异步调用函数的实现方法,DebugLZQ在写这篇博文之前自己先动手写了本文的所有示例代码,开写之前是做过功课的,用代码说话方有说服力. 本文的内容旨在用最简洁的代码来把异步调用的方法说清楚,园子里的高手老鸟可以绕行,不喜勿喷,非诚勿扰~ lz的前一篇文章简单的说了下异步,主要是从理解上来讲:这篇文章主要写具体的实现方法.实现异步编程有4种方法可供选择,这4种访求实际上也对应着4种异步调用的模式,分为"等待&
-
js表格排序实例分析（支持int,float,date,string四种数据类型）
本文实例讲述了js表格排序的方法.分享给大家供大家参考.具体如下: <html> <head> <title>SortTable2</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> var k=0; /**//*
-
js修改onclick动作的四种方法(推荐)
第一种:button.onclick = Function("alert('hello');"); 第二种:button.onclick = function(){alert("hello"); }; 第三种:button.onclick = myAlert; function myAlert(){ alert("hello"); } 第四种: 这种情况更加动态,更为实用,而且
-
JS生成某个范围的随机数【四种情况详解】
前言: JS没有现成的函数,能够直接生成指定范围的随机数. 但是它有个函数:Math.random() 这个函数可以生成 [0,1) 的一个随机数. 利用它,我们就可以生成指定范围内的随机数. 而涉及范围的话,就有个边界值的问题.这样就包含四种情况: 1)min ≤ r ≤ max (一般这种比较常见) 2)min ≤ r < max 3) min < r ≤ max 4)min < r < max 一.min ≤ r ≤ max function RandomNumBoth(
-
浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序
在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: function fnMethodName(x){alert(x);} 函数字面量(Function Literals): var fnMethodName = function(x){alert(x);} Function()构造函数: var fnMethodName = new Function('x','alert(x);') // 由Function构造函数的参数个数可变.最后一个参数写函数体
-
js学习总结_基于数据类型检测的四种方式(必看)
1.typeof 用来检测数据类型的运算符 console.log(typeof 12)//Number 使用typeof检测数据类型,首先返回的都是字符串 ,其次字符串中包含了对应的数据类型 例如:"number"."string"."boolean"."undefined"."function"."object" console.log(typeof typeof function(