纯js实现黑客帝国特效 demo实例

今天刷抖音看到一个抖友拍自己老公(程序猿)凌晨两点多还加班的视频,点开评论看到网友提到黑客帝国这个词,于是给大家分享下如何用原生JavaScript代码实现黑客帝国的特效。

更多精彩内容请看web前端中文站
www.lisa33xiaoq.net 可按Ctrl + D 进行收藏

js黑客帝国

js黑客帝国

具体的特效效果是Matrix,矩阵的意思。

开发思路:(参考)

1、利用HTML5中的canvas知识;

2、由JavaScript生成随机字符(例:oKca!;+4>Nnmb9Z);

3、将整个页面当做一个canvas画布,然后把字符画上去;

4、重复这个动作:生成字符、画到页面上。不过需要考虑每次字符在页面的location。

 

代码解释:

  var cav = document.getElementById('content');
  var w = window.screen.width;
  var h = window.screen.height;
  var yPositions = Array(300).join(0).split('');
  var ctx = cav.getContext('2d');
  var draw = function(){
  //www.lisa33xiaoq.net
  ctx.fillStyle = 'rgba(0,0,0,.05)';
  ctx.fillRect(0,0,w,h);
  ctx.fillStyle = 'green';
  ctx.font = '20px';

  yPositions.map(function(y,index){
  text = String.fromCharCode(1e2+Math.random()*330);
  x = index*10;
  cav.getContext('2d').fillText(text,x,y);
  if(y>Math.random()*1e4){     
      yPositions[index]=0;
      }else{
        yPositions[index]=y+10;
      }
    });
  }
  setInterval('draw()',30);

1、获取画布;

2、获取本机显示器的分辨率:

3、在页面中画出一个矩形,因为前面说过,canvas的尺寸会影响最后的效果。需要注意的是,我们不能动态的改变canvas的尺寸(那样会使canvas重新绘制),所以当页面绘制好后我们再去调整浏览器的尺寸是就会产生白边。

解决办法:直接把canvas的尺寸设置为屏幕的分辨率。因为这样不管怎么调整,浏览器的尺寸都不可能比屏幕还大。

4、生成随机字符了。我们用了这样一段代码:

     text = String.fromCharCode(1e2+Math.random()*330);

5、map(callback())方法创建一个新数组,其结果是该数组中的每个元素调用一个提供的函数。callback函数会被自动传入三个参数:数组元素,元素索引,原数组本身。所以没执行一次draw()

效果:函数会在X方向上生成一排的字符。

6、用x和y来指定字符在页面中的位置。x指定没列字符占10px的宽度,y同样每次增加10px,为每个字符在y方向占10px高度。当然每列字符不可能数量都相同,所以只要y的值大于一个随机数之后新的字符就生成在页面顶部。

      x = index*10;
      cav.getContext('2d').fillText(text,x,y);
      if(y>Math.random()*1e4){
        yPositions[index]=0;
      }else{
        yPositions[index]=y+10;
      }

7、特别注意,在前面要生成一个值全部为0的数组,主要控制字符的列数。

      var yPositions = Array(300).join(0).split('');

web前端中文站点评:

学习javascript很需要注重基础知识的积累巩固,如果连一个小效果都不能独立完成的话,那我们真的很需要从基础开始学起。然后再按项目思路去接触实际的项目开发,这样或许会更有用。

点击在线演示效果

 

【注:本文源自网络文章资源,由站长整理发布】

0
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到