黑客效果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> <!-- 黑客效果代码结束 -->
发表评论