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

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

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

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

点击在线演示效果

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