canvas之坐标体系及形变

感觉书里第二章绘图写得稍稍有点乱，看起来不太适应，打算拆成三部分梳理

• 坐标体系及形变

• 路径绘制

• 渲染

坐标体系是canvas绘图的基础，而形变与坐标体系密切相关。
路径绘制是canvas绘图的主要手段。
渲染包括阴影，渐变，pattern，globleCompositeOperation，clip等影响绘图展示的因素。

这篇先整理坐标体系及形变。

canvas坐标体系

canvas坐标体系与svg一致。默认以画布左上角为(0, 0)原点坐标，x轴坐标方向向右，y轴坐标方向向下。

canvas形变

把形变写在前面，是因为和svg一样，canvas的形变也和绘制的图形无关，发生改变的是其坐标体系。

CanvasRenderingContext2D提供了tranlate(), rotate(), scale()三个方法实现坐标体系的位移、旋转、缩放功能。
context.translate(100, 50);
context.rotate(45);
context.scale(1, -2);

同样，变化的次序不同，结果不同。

transform() & setTransform()

canvas也提供了使用形变矩阵matrix来实现复杂形变的功能。
CanvasRenderingContext2D提供了两个方法，transform()和setTransform()。两者不同的地方在于，transform()是基于当前坐标体系的做的形变，也就是说如果坐标体系已经发生了形变，transform()会在这基础上再次形变；setTransform()是基于初始坐标体系做的形变，不管当前坐标体系发生了什么样的形变，都会被setTransform()根据初始坐标体系形变结果覆盖。其余一模一样。

transform(a,b,c,d,e,f)接收6个参数, 分别对应变形矩阵的前两列数值，形变矩阵计算公式如下：

a c e   x   ax+cy+e
b d f * y = bx+dy+f
0 0 1   1   1

即经过矩阵变化过的原坐标点(x,y)会变为(ax+cy+e, bx+dy+f)

canvas中没有提供类似svg和css中的skew形变，所以唯一途径就是transform()了：

skewX(θ) ==> context.transform(1,0,Math.tan(Math.PI*θ/180),1,0,0);
skewY(θ) ==> context.transform(1,Math.tan(Math.PI*θ/180),0,1,0,0);

之前svg之transform里转过张鑫旭的一篇关于matrix形变的文章，这里再转一次
http://www.zhangxinxu.com/wor...。
形变这玩意儿思想都一样，用一种技术搞清楚后，其他技术基本就是换汤不换药。