jquery It’s fun to realize the opening animation effect of The Matrix. Friends who are interested in jquery can study it in depth and learn from usjquery It’s also a help~
## Code implementation:
<html> <head> <title>PHP中文网</title> <meta charset="utf-8"> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script> /* 11 ① 用setInterval(draw, 33)设定刷新间隔 12 13 ② 用String.fromCharCode(1e2+Math.random()*33)随机生成字母 14 15 ③ 用ctx.fillStyle=’rgba(0,0,0,.05)’; ctx.fillRect(0,0,width,height); ctx.fillStyle=’#0F0′; 反复生成opacity为0.5的半透明黑色背景 16 17 ④ 用x = (index * 10)+10;和yPositions[index] = y + 10;顺序确定显示字母的位置 18 19 ⑤ 用fillText(text, x, y); 在指定位置显示一个字母 以上步骤循环进行,就会产生《黑客帝国》的片头效果。 20 */ $(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 = 'green';/*代码颜色*/ ctx.font = '10pt Georgia'; yPositions.map(function(y, index) { text = String.fromCharCode(1e2 + Math.random() * 330); 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" style=" position:fixed; left:0; top:0px; width:100%; height:100%;"> <canvas id="q" width="1440" height="900"></canvas> </div> </body> </html>
The above is jquery implements all the source code of the opening animation effect of The Matrix. Interested students can go to PHP中文网 to search for more related content!
Related recommendations:
jquery title selection animation
jquery implements sliding verification on pc
jquery accordion focus animation
jquery implementation Gesture unlock source code
The above is the detailed content of jQuery realizes the opening animation effect of The Matrix. For more information, please follow other related articles on the PHP Chinese website!