瞎扯淡 HTML 5 的 Canvas 实在是太难用了

cichol · 2014年07月26日 · 最后由 cicholgricenchos 回复于 2014年07月28日 · 3260 次阅读

初学,拿来做点东西,结果发现这货不能斜向绘制文字,只能先旋转,绘制,再转回去,这算是开胃菜。

接着,用那个 translate 为旋转移动原点,这移动竟然是叠加的,translate(100,100),再 translate(1,1),原点就变成了 (101,101),而且一旦旋转后坐标系也变了,也就是说要找回原点,我必须逆着旋转一次,再逆着 translate 回去,一旦有些什么岔子,原点就丢失了,没错,它就丢失了,再也找不到了。

后来,我想匹配一个斜向矩形的点击事件,为了方便我就想先把矩形转成正放的然后再匹配,结果失败了,我发现旋转后的矩形和我的鼠标坐标不是同一个参考系,而鼠标坐标是通过 mousemove 监听得到的,我没有办法在新的参考系中更新这个坐标。

但是我还是错了,又过了一会,我才发现鼠标坐标是参照整个 canvas 画布的,而无论怎么旋转,都不会改变,也就是要匹配旋转后的鼠标点击事件,我不得不先对鼠标坐标做一次坐标变换。

引用网上一句话,用 canvas 做东西就要“从橡胶树开始造轮子”,造出矢量等工具之后才可能谈得上开发效率。我现在觉得 canvas 唯一的作用就是做 banner 广告,稍微有一点交互都会累死人。

不知道各位会用什么做图形丰富的交互应用,flash,svg,canvas,DOM? 之前都说 js+canvas 可以取代 flash,但是现在看来。。。

Canvas 是写 pixel 的,不能重复利用对象。就真的像油画布一样,涂上去就不能动了,只能擦了重画。

这槽吐的。。。说实话,没吐到点子上。

如果按照你上面的用法,即使换了其他 2D API(如:Windows 的 GDI,GDI+,Mac OS 的 Quartz 2D 等),也同样会觉得 实在是太难用了。为什么如此?因为用法不对。因为你忽略了 变换矩阵 这个武器。

一般刚上来用 2D API 时,大都喜欢直接 hardcode,这样做倒是方便,比如能很快的画个线了,矩形,圆等等。如果只是画简单图形,那么 hardcode 就很 OK 了。

但是,一但变换比较多,如果再有什么相对变换,再加上动画之类的,那么 hardcode 就是死路一条。就会象楼主一样,越写越烦,步步谨慎,估计都有摔键盘的冲动;)

通常的做法是把 变换矩阵 用堆栈管理起来,简单的说就是在开始新的变换前,先把当前的变换矩阵入栈保存,然后进行变换,完成后,再把栈顶的变换矩阵 pop,并用其更新当前的变换矩阵。这样做的好处是每次进行新的变换时都不会影响当前的 变换矩阵。如果你接触过一些简单的 2D Game 框架的话,就能理解我说的了。比如用 Canvas 来实现一个 简版的 Cocos2D 的 Node Tree,也是简单的事情。

Canvas 的 transformsetTransform   是可以直接修改变换矩阵的两个方法(这两个有区别),你可以参考下。

最后,其实 2D 的图形 API 用法都基本类似。通了原理,其它的看看手册就能上手了。

#2 楼 @skandhas 谢谢,确实没接触过,我继续研究研究

需要 登录 后方可回复, 如果你还没有账号请 注册新账号