黑客效果html代码
分享一段html黑客特效代码，这套代码可以实现显示出电视剧当中演出的黑客代码特效效果，页面显示的黑客效果高端大全，非常的有层次感，主要是用来跟别人炫耀的，演示给其他不懂电脑的小白，还是很让人羡慕的。
这段代码我已经试验过了，打开的界面中会出现黑色背景，背景上面有绿色的数字滚动，特别像是电视上面演的一些黑客告诉，电脑上显示一些奇怪有层次感的东西，我们如果用这个东西给别人看，去炫耀还是很有用的，给不懂的人看还是会让人觉得很牛的，具体看下面的演示图，图片可能不太清晰，但是效果很好。
我们首先在电脑上新建文本文档，将下方代码拷贝到文档中，然后把文本后缀txt改为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>
<!-- 黑客效果代码结束 -->
发表评论