jquery实现黑客帝国的片头动画效果

来源：动视网责编：小采时间：2020-11-27 20:11:06

jquery实现黑客帝国的片头动画效果

jquery实现黑客帝国的片头动画效果:jquery实现黑客帝国的片头动画效果，感觉挺好玩的，对jquery感兴趣的朋友可以深度研究一下，对我们学习jquery也是一种帮助~代码实现： <html> <head> <title>PHP中文网</title> <meta charset=&q

推荐度：

点击下载本文 文档为doc格式

导读jquery实现黑客帝国的片头动画效果:jquery实现黑客帝国的片头动画效果，感觉挺好玩的，对jquery感兴趣的朋友可以深度研究一下，对我们学习jquery也是一种帮助~代码实现： <html> <head> <title>PHP中文网</title> <meta charset=&q

jquery实现黑客帝国的片头动画效果，感觉挺好玩的，对jquery感兴趣的朋友可以深度研究一下，对我们学习jquery也是一种帮助~

J%1N[(ZLXU~ZV_}F~UCP`LD.png

代码实现：

 <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>

以上是jquery实现黑客帝国的片头动画效果所有源码，感兴趣的同学们可以到PHP中文网搜索更多相关内容哦！

jquery实现黑客帝国的片头动画效果

推荐度：

点击下载本文 文档为doc格式

标签：特效效果动画效果

热门焦点

jquery实现黑客帝国的片头动画效果

jquery实现黑客帝国的片头动画效果

jquery实现黑客帝国的片头动画效果

最新推荐

猜你喜欢

热门推荐