分享JS四种好玩的黑客背景效果代码
短信预约 -IT技能 免费直播动态提醒
示例一
<html>
<head>
<title>The Matrix</title>
<script class="lazy" data-src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript"></script>
<meta charset="utf-8">
<script>
$(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 class="lazy" data-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('');
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) {
x = (index * 10);
ctx.fillText(parseInt(Math.random() * 10), x, y);
if (y > 500) {
YPositions[index] = 0;
} else {
YPositions[index] = y + 10;
}
});
};
setInterval(draw, 30);
</script>
</body>
</html>示例三
<html>
<head>
<title>Do You Know HACKER-1</title>
<script class="lazy" data-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 ctx1 = $("#myCanvasMatrix").get(0).getContext("2d");
var Matrix=function(){
ctx1.fillStyle = 'rgba(0,0,0,.07)';
ctx1.fillRect(0,0,500,500);
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);
}
$("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代码内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
