分享四種好玩的黑客背景效果JS程式碼
阿新 • • 發佈：2021-11-27
目錄
- 示例一
- 示例二
- 示例三
- 示例四
示例一
<html>
<head>
<title>The Matrix</title>
<script src="http://ajax.googleapis.com/ajax/libs//1.7.1/jquery.min."
type="text/"></script>
<meta charset="utf-8">
<script>
/*
① 用setInterval(draw,33)設定重新整理間隔
② 用String.fromCharCode(1e2+Math.random()*33)隨機生成字母
③ 用ctx.fillStyle='rgba(0,.05)'; ctx.fillRect(0,width,height); ctx.fillStyle='#0F0′; 反覆生成opacity為0.5的半透明黑色背景
④ 用x = (index * 10)+10;和yPositions[index] = y + 10;順序確定顯示字母的位置
⑤ 用fillText(text,x,y); 在指定位置顯示一個字母 以上步驟迴圈進行，就會產生《黑客帝國》的片頭效果。
示例二
<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/script"></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,.05)';
EoPYZ
示例三
<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,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx1.fillStyle=my_gradient;
*/
ctx1.fillStyle = 'rgba(0,.07)';
/*
fillStyle 屬性設定或返回用於填充繪畫的顏色、漸變或模式。
rgba(R,G,B,A)
其中'.05'代表阿爾法透明度
*/
ctx1.fillRect(0,500,500);
/*
fillRect() 方法使用 fillStyle 屬性所指定的顏色、漸變和模式來填充指定的矩形
*/
ctx1.fillStyle = "#0f0";
ctx1EoPYZ.fillText('zhengbin',Math.random()*(500),Math.random()*(500));
ctx1.fillText('cnblogs',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 = fuEoPYZnction(){
ctx.fillStyle = 'rgba(0,.05)';
ctx.fillRect(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,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程式碼內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！