瞎扯淡 HTML 5 的 Canvas 实在是太难用了
初学，拿来做点东西，结果发现这货不能斜向绘制文字，只能先旋转，绘制，再转回去，这算是开胃菜。
接着，用那个 translate 为旋转移动原点，这移动竟然是叠加的，translate(100,100)，再 translate(1,1)，原点就变成了 (101,101)，而且一旦旋转后坐标系也变了，也就是说要找回原点，我必须逆着旋转一次，再逆着 translate 回去，一旦有些什么岔子，原点就丢失了，没错，它就丢失了，再也找不到了。
后来，我想匹配一个斜向矩形的点击事件，为了方便我就想先把矩形转成正放的然后再匹配，结果失败了，我发现旋转后的矩形和我的鼠标坐标不是同一个参考系，而鼠标坐标是通过 mousemove 监听得到的，我没有办法在新的参考系中更新这个坐标。
但是我还是错了，又过了一会，我才发现鼠标坐标是参照整个 canvas 画布的，而无论怎么旋转，都不会改变，也就是要匹配旋转后的鼠标点击事件，我不得不先对鼠标坐标做一次坐标变换。
引用网上一句话，用 canvas 做东西就要“从橡胶树开始造轮子”，造出矢量等工具之后才可能谈得上开发效率。我现在觉得 canvas 唯一的作用就是做 banner 广告，稍微有一点交互都会累死人。
不知道各位会用什么做图形丰富的交互应用，flash，svg，canvas，DOM？ 之前都说 js+canvas 可以取代 flash，但是现在看来。。。
这槽吐的。。。说实话，没吐到点子上。
如果按照你上面的用法，即使换了其他 2D API（如：Windows 的 GDI，GDI＋，Mac OS 的 Quartz 2D 等），也同样会觉得 实在是太难用了。为什么如此？因为用法不对。因为你忽略了 变换矩阵 这个武器。
一般刚上来用 2D API 时，大都喜欢直接 hardcode，这样做倒是方便，比如能很快的画个线了，矩形，圆等等。如果只是画简单图形，那么 hardcode 就很 OK 了。
但是，一但变换比较多，如果再有什么相对变换，再加上动画之类的，那么 hardcode 就是死路一条。就会象楼主一样，越写越烦，步步谨慎，估计都有摔键盘的冲动；）
通常的做法是把 变换矩阵 用堆栈管理起来，简单的说就是在开始新的变换前，先把当前的变换矩阵入栈保存，然后进行变换，完成后，再把栈顶的变换矩阵 pop，并用其更新当前的变换矩阵。这样做的好处是每次进行新的变换时都不会影响当前的 变换矩阵。如果你接触过一些简单的 2D Game 框架的话，就能理解我说的了。比如用 Canvas 来实现一个 简版的 Cocos2D 的 Node Tree，也是简单的事情。
Canvas 的 transform 和 setTransform 是可以直接修改变换矩阵的两个方法（这两个有区别），你可以参考下。
最后，其实 2D 的图形 API 用法都基本类似。通了原理，其它的看看手册就能上手了。