1. 首页
  2. IT资讯

装逼利器:打造黑客文字矩阵雨

“u003Cdivu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F37dd00020c92c4f8eaf5″ img_width=”408″ img_height=”174″ alt=”装逼利器:打造黑客文字矩阵雨” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E黑客帝国都看过吧,满屏幕的数字文字落下来,HTML5骇客帝国文字矩阵效果基于HTML5 canvas,效果非常震撼。今天分享一下,提高逼格。需要源代码项目练手的可以加一下我的学习群,文件自助下载285154486。u003Cu002Fpu003Eu003Cpu003E废话不多说直接写代码u003Cu002Fpu003Eu003Cpu003E<title>文字矩阵效果<u002Ftitle>u003Cbru003Eu003Cu002Fpu003Eu003Cpu003E<u002Fhead>u003Cu002Fpu003Eu003Cpu003E<body>u003Cu002Fpu003Eu003Cpu003E<style type=”textu002Fcss”>u003Cu002Fpu003Eu003Cpu003E*{margin:0;padding:0;list-style-type:none;}u003Cu002Fpu003Eu003Cpu003Ea,img{border:0;}u003Cu002Fpu003Eu003Cpu003Ebody{font:12pxu002F180% Arial, Helvetica, sans-serif, “新宋体”;overflow:hidden;}u003Cu002Fpu003Eu003Cpu003E<u002Fstyle>u003Cu002Fpu003Eu003Cpu003E<canvas id=”q”><u002Fcanvas>u003Cu002Fpu003Eu003Cpu003E<script type=”textu002Fjavascript” >u003Cu002Fpu003Eu003Cpu003Evar s = window.screen;u003Cu002Fpu003Eu003Cpu003Evar width = q.width = s.width;u003Cu002Fpu003Eu003Cpu003Evar height = q.height = s.height;u003Cu002Fpu003Eu003Cpu003Evar letters = Array(256).join(1).split(”);u003Cu002Fpu003Eu003Cpu003Evar draw = function () {u003Cu002Fpu003Eu003Cpu003Eq.getContext(‘2d’).fillStyle=’rgba(0,0,0,.05)’;u003Cu002Fpu003Eu003Cpu003Eq.getContext(‘2d’).fillRect(0,0,width,height);u003Cu002Fpu003Eu003Cpu003Eq.getContext(‘2d’).fillStyle=’#0F0′;u003Cu002Fpu003Eu003Cpu003Eletters.map(function(y_pos, index){u003Cu002Fpu003Eu003Cpu003Etext = String.fromCharCode(3e4+Math.random()*33);u003Cu002Fpu003Eu003Cpu003Ex_pos = index * 10;u003Cu002Fpu003Eu003Cpu003Eq.getContext(‘2d’).fillText(text, x_pos, y_pos);u003Cu002Fpu003Eu003Cpu003Eletters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;u003Cu002Fpu003Eu003Cpu003E});u003Cu002Fpu003Eu003Cpu003E};u003Cu002Fpu003Eu003Cpu003EsetInterval(draw, 33);u003Cu002Fpu003Eu003Cpu003E<u002Fscript>u003Cu002Fpu003Eu003Cpu003E<u002Fbody>u003Cu002Fpu003Eu003Cpu003E下面就是见证奇迹的时刻!u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F37e20001e0df0dbd515f” img_width=”1021″ img_height=”702″ alt=”装逼利器:打造黑客文字矩阵雨” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E学会了吗,不懂可以在评论下方留u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:装逼利器:打造黑客文字矩阵雨

主题测试文章,只做测试使用。发布者:熱鬧獨處,转转请注明出处:http://www.cxybcw.com/26582.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code