HTML5技术

车大棒浅谈for循环+canvas实现黑客帝国矩形阵 - 车大棒

字号+ 作者:H5之家 来源:H5之家 2017-01-18 15:01 我要评论( )

车大棒浅谈for循环+canvas实现黑客帝国矩形阵 背景: 一日在网上闲逛的之时,突然看到一个利用JQ插件实现canvas实现的电影黑客帝国的小Demo。觉得创意不错,就下载下来研究一下。 网上浏览jQuery的写法$(document).ready(function() {var s = window.screen;

车大棒浅谈for循环+canvas实现黑客帝国矩形阵

背景:
一日在网上闲逛的之时,突然看到一个利用JQ插件实现canvas实现的电影黑客帝国的小Demo。觉得创意不错,就下载下来研究一下。

黑客帝国开场动画效果Demo

网上浏览jQuery的写法 $(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 = 'red'; ctx.font = '10pt Georgia'; yPositions.map(function(y, index) { text = String.fromCharCode(1e2 + Math.random() * 33); 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, 1000); } });

全程100行不到的代码,主体的核心就是定时器调用canvas进行绘画处理。要是让我这种段子手来写,估计我把敲烂键盘都想不出这样营造效果。艺术细胞真的很重要咕~~(╯﹏╰)

老王:“等等大棒!不是说js+canvas实现黑客帝国矩形雨,可是你这个附上的代码分明是jQ+canvas.”

老管:"就是!你这个标题汪,这是又要搞事情呀!"

我:“别急呀!这个jQ+canvas因为网上很多人博客都有写,所以这边只是附上一下jQ代码供大家参考。下面才是我今天要通过for循环代替上面的map()来实现的!!

夫子:别净扯理由,你是根本就不会map()用法!!”

老齐: "净说什么大实话!大棒是根本看不懂......"

我:.........好吧!你们说对了,我的确是不会map()方法。(让我蹲墙角哭会/((╥╯^╰╥)”

你们开心就好!

万能for循环的写法

好了不扯犊子了,言归正传。让我们回到下面要讲的代码上面来。

1、基本准备工作

1.1、HTML骨架部分

<canvas>请使用Google浏览器或者IE9以上</canvas>

1.2、JavaScript部分

var hacker = document.getElementById("hacker"); var width = hacker.width = screen.width; //screen.width拿到是当前屏幕宽度 var height = hacker.height; var ctx = haceker.getContext('2d');

做完这几步之后,我们就能够拿到当前屏幕的宽度、以及canvas画布的宽度和得到canvas画布的上下文。

2、数组的准备 var num = Math.ceil(width / 10); var y = Array(num).join(0).split('');

这里估计有人会询问了,这里创建一个数组是干嘛。为什么数组的length >= num?

O(∩_∩)O哈哈~,别着急,后面的代码就会个大家逐一解释了。

不要激动,先安静的当一个美男子!

3、定义一个重复调用核心draw()方法 var draw = function() { ctx.fillStyle = 'rgba(0,0,0,.05)'; //创意核心语句之一 ctx.fillRect(0, 0, width, height); ctx.fillStyle = '#0f0'; ctx.font = '10px Microsoft YaHei'; for(i = 0; i < y.length; i++) { var x = (i * 10) + 10; text = String.fromCharCode(1e2 + Math.random() * 33); var y1 = y[i]; ke.getContext('2d').fillText(text, x, y1); console.log(height); if(y1 > Math.random() * 10 * height) { y[i] = 0; } else { y[i] = parseInt(y[i]) + 10; } } }

3.1、ctx绘画过程解释

ctx.fillStyle = 'rgba(0,0,0,.05)'; //创意核心语句之一 ctx.fillRect(0, 0, width, height);

这里为设定的区域铺上一个rgba(0,0,0,.05) 这样黑色半透明的背景。

ctx.fillStyle = '#0f0'; ctx.font = '10px Microsoft YaHei';

这里就是画出大小为 10px,字体为微软雅黑的字体。

两行代码看起来就是很普通的代码,但是组合起来却发生一个质的变化。

为什么会有层次感呢?要知道getContext('2d')这句语句,就决定了canvas只能绘制2D图像,不能绘制3D层次感的图形!

答案就在 ctx.fillStyle = 'rgba(0,0,0,.05)';上面,当重复调用方法的时候,这种半透明的灰黑色背景就会盖在之前的画好绿色文字上面。因此因此就造成了有文字是绿色,有的文字变成灰绿色。

各个文字之间形成一种视觉差,从而让人感觉到3D立体矩形代码阵效果。所以当我发现两组这么普通的代码组合起发生如此厉害效果,当即激动拍了拍键盘。大呼一声!

“哇靠!这个真心666!”

喵星人发来贺赞

3.2、for循环解释

for(i = 0; i < num; i++) { var x = (i * 10) + 10; text = String.fromCharCode(65 + Math.random() * 62); var y1 = y[i]; ctx.fillText(text, x, y1); console.log(height); if(y1 > Math.random() * 10 * height) { y[i] = 0; } else { y[i] = parseInt(y[i]) + 10; } } }

3.3、关于canvasX轴上面文字控制

因为前面每次画的文字大小都是10px,那么如果我把canvasX轴平铺满。需要多少个文字呢。

答案 = Math.ceil(width / 10); => 即就是我前面的num

小说明:

为什么得用Math.ceil()向上取整,而不能用Math.floor向下取整,parseInt()之类。

因为假设num = 300.8样子,那么使用Math.floor() 或者parseInt(),就好把这个数转换成300

那么后面,绘制300个文字在canvasX轴,那么最右边就还有0.8个文字,也就是8px空隙一种没有字母出现。向上取整,就会铺满,多的部分超出canvas区域,就会消失。

text = String.fromCharCode(65 + Math.random() * 62);这里就是每次for循环的时候产生65 - 127 的数字,之后将其转换为大写、小写字母,以及一些符号

控制台检测text

3.4关于canvasY轴的控制

这里前面定义的数组就派上用场了var y = Array(num).join(0).split('');,这里就是用于记录与控制每一次canvas文字的Y轴。

为什么要用数组去记录呢?说实话,当初我也是这么认为的,所以我没有尝试控制每一个文字Y轴的数据,让所以的Y轴依次累加,结果效果如下:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 怎样让js循环重复执行过程 - 诩小贝

    怎样让js循环重复执行过程 - 诩小贝

    2016-12-17 13:01

  • 浅谈微信小程序对于创业者,意味着什么? - 腾讯攻城师lee

    浅谈微信小程序对于创业者,意味着什么? - 腾讯攻城师lee

    2016-12-17 12:00

  • 浅谈Hybrid技术的设计与实现第三弹——落地篇 - 叶小钗

    浅谈Hybrid技术的设计与实现第三弹——落地篇 - 叶小钗

    2016-10-27 10:00

  • html5 canvas首屏自适应背景动画循环效果代码 - 上善如水211

    html5 canvas首屏自适应背景动画循环效果代码 - 上善如水211

    2016-08-23 16:00

网友点评
"