今天刷抖音看到一个抖友拍自己老公(程序猿)凌晨两点多还加班的视频,点开评论看到网友提到黑客帝国这个词,于是给大家分享下如何用原生 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 很需要注重基础知识的积累巩固,如果连一个小效果都不能独立完成的话,那我们真的很需要从基础开始学起。然后再按项目思路去接触实际的项目开发,这样或许会更有用。
【注:本文源自网络文章资源,由站长整理发布】