Canvas初体验:不太乐观

Mr Doob - Magic Dust | Amazing HTML5 | Scoop.it

Canvas是html5的重中之重,也是html5最难的部分——但他之所以难是因为他是通过javascript操作的,而javascript本身就不简单。

通过几天的初步学习,我对canvas也有了一点了解。但这一点“了解”让我很郁闷,很是打击了我继续学习canvas的动力。

由于我曾经学习过flash,所以会不自觉的拿canvas与flash来做比较。但就目前的了解,canvas相对于flash来说,除了代码与html交互更方便之外,没有任何优势。

很多人说flash的效率差,但遗憾的是,canvas的效率更差。这和canvas本身的设计有关。

1,canvas没有“层”的概念

canvas虽然有“组合”的概念(globalCompositeOperation ),可以决定新画的图形和已有图形的叠加方式,但他的所有图形还是画在同一层上的,当清除canvas某区域时,不论这里叠加了多少个图形,都会被一次清空。

这一点对想用canvas来制作动画的同学,可以说是一个致命的打击。动画就是需要移动图形,而canvas是怎么移动的呢?就是把图形原来的位置清空,再把图形重新绘制到新的位置。但关键是canvas的所有图形都在一层,本来你只想清空需要动的图形,但canvas只能把这个图形连带他的背景也一起清除掉。

背景清除掉了,下一步总得把背景画上啊。这无疑是一个额外的工作,而且还是一个很困难的额外工作。

2,canvas画则画矣,无法控制图形

canvas只能在画的时候控制这个图形,一旦你把图形绘制出来了,他就定死了,无法操作了。

这个意思是说,你可以用canvas画一个图形,但他却不能控制这个图形。比如你画了一条线,你想把他旋转,或者缩短延长什么的,不行;你画了一个圆,之后想把他变成椭圆,或者缩小,或者把他的填充色改成红色——没门!你想给某个图形添加事件,比如mouseover,mousedown之类的,还是没门儿!

canvas画的图形是不能“存储”的。这个存储是指像通常的JS对象一样,用一个变量保存起来。比如我画了一条线,然后把他赋给一个变量,之后我就可以通过操作这个变量来操作他对应的这条线了是吗?哈哈哈哈,想得美!

你可以把一条线赋给一个变量,但这个变量还是空的,无法操作。

我用canvas循环画出10个圆,然后我想让第3个圆做心跳运动(可能会和其他的圆重叠了)。怎么办?清空,重新画!

canvas的这一特点,也是他做动画效率低的原因。就拿我们最常见的制作一个会动的时钟来说,这在flash里是比较简单的,只要我们画出表盘,刻度,指针,然后依照某规律旋转指针,就行了。在这里我们假设这个钟的秒针比较长会与刻度重合

而canvas画一个时钟要怎么做呢?指针要动怎么办?就是每次都清除指针,然后重新画!清除指针的时候把刻度也清除了怎么办?刻度也重新画!

当然你也可以想一些巧妙的办法来避免重新画所有元素,比如把不动的表盘与刻度存为一张图片,每次画的时候画这张图片就行了;也可以把表盘另存到另一个canvas里面,每次画的时候直接画这个canvas就行了,然后在上面补指针。

但是,尼玛啊,为什么要这样啊!我的表盘根本就不需要动,为什么每次都要重新画他啊!?

3,canvas只有一支笔

这只“笔”就是getContext(‘2d’),你可以把getContext(‘2d’)赋给两个变量,但这两个变量还是一体的,不能单独作画。比如你要画10条平行线,只有通过让这只唯一的‘笔’不断的moveTo,lineTo来画(就是一个普通的for循环),而不能定义10支笔,给他们平行的坐标,然后每支笔画一下即可。

虽然同时只能操作一只笔跟现实生活中人们的习惯是一样的,但canvas毕竟是虚拟的,可以做的更灵活点啊!

4,canvas语法不简洁

canvas和css3 一样,都属于新知识,他们也可以实现许多一样的功能,比如用他们分别画一个带投影的矩形。css3的语法是这样的:

box-shadow:3px 3px 5px 4px rgba(0,0,0,0.5);

而canvas的语法是怎样呢?如下:

1
2
3
4
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";

他们只能分开设置。

其他比如渐变什么的,也是一样,只能分开设置。这样无疑会产生大量代码。

另外,作为一个jQuery的拥护者,对canvas不支持链式语法表示很遗憾。比如画线的语法,完全可以这样:ctx.moveTo(3,3).lineTo(10,10);很酷,又简洁,但只能想想,canvas不支持。

5,canvas画图不直观

canvas可以画出任何图形,因为任何图形都是由线条组合出来的。比如圆角矩形,就是4条直线+4条弧线——所以,canvas画圆角矩形的办法,还真是分别画4条直线和弧线!没有直接画圆角矩形的函数!

当然,我们可以自定义画圆角矩形的函数,这不是什么大问题。

另外就是,canvas全部用代码画图,导致很不直观,比如用他画曲线,只能靠猜。

不过小白们可以坐等高手写一个web版的canvas绘图程序,模拟PS之类的来给canvas直观的绘图方式。

———————————结语——————————-

综上所述,canvas真的就是“画布”,跟现实生活的画布一模一样。只能用一支笔,画了不能改,要改就只有擦除重画,如果要动怎么办——画10张画布轮番看!

《Canvas初体验:不太乐观》有4个想法

  1. canvas当然是这样啊你说的这都什么跟什么,哪个设备上的canvas不是这样工作的??你没用过dom吗??回家种田去吧!!!

发表评论

电子邮件地址不会被公开。