• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

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

JavaScript web前端中文站 1年前 (2018-04-21) 1724次浏览 已收录 0个评论

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

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

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

点击在线演示效果

 

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


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:纯 js 实现黑客帝国特效 demo 实例
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址