html5Canvas学习笔记(4)坐标变换

原文来自林伟健个人博客

继续上个笔记继续更新笔者的学习笔记，上几个笔记链接：

html5Canvas学习笔记(1)矩形

html5Canvas学习笔记(2)圆形

html5Canvas学习笔记(3)直线曲线

今天笔者来说一下坐标变换，说起坐标变换，童鞋们可能想起数学，没错，综合前几个笔记来看，其实任何关于绘画的，都会涉及到数学，包括一些复杂的图像界面，甚至是3d立体图形，都是由一罗列精密的数学运算而成。

说会坐标变换，应该都不会陌生，因此可能童鞋们猜到了，它涉及到几种变换：平移，缩放和旋转。

1.平移translate(x,y)-用来移动 canvas 和它的原点到一个不同的位置

x是左右偏移量，y 是上下偏移量

下面看演示：[点击查看演示]

通过该例子我们可以看到，第一个红色方块在translate(100,50)之前，所以肯定不会受到函数而平移；第二个方块 translate(100,50)之后，canvas原点右移100个单位，下移50个单位；之后在第三个方块出来前又调用了 translate(100,50)，canvas原点在(100,50)基础上右移100个单位，下移50个单位。

2.缩放scale(x,y)-增减图形在 canvas 中的像素数目，对形状，位图进行缩小或者放大

x代表是水平方向缩放倍数，y代表垂直方向缩放倍数。数值在0-1之间的代表缩放，而大于1的代表扩大，值为 1时什么效果都没有。

默认情况下，canvas 的 1 单位就是 1 个像素。当我们设置缩放因子是 0.5，1 个单位就变成对应 0.5 个像素，这样绘制出来的形状就会是原先的一半。同理，设置为 2.0 时，1 个单位就对应变成了 2 像素，绘制的结果就是图形放大了 2 倍。

下面看演示：[点击查看演示 ]

我们来解释一下，第一个是红方块，在scale(0.5,0.5)之前，因此未受到影响，位置在(100,100)，大小为50×50;

第二个为黑方块，在scale(0.5,0.5)之后，水平方向和垂直方向canvas的像素都缩放了0.5，变成0.5像素，所以大小变成25×25;因为像素缩放成0.5，因此位置的(100,100)也变成(50,50);

第三个为蓝色方块，在scale(2,1)之后，水平方向扩大2倍，所以像素大小由原来0.5到0.5×2=1像素，垂直方向设置为1时不变，因为0.5×1=0.5，还是0.5像素不变，因此大小上变成了(50,25),位置变成(100,50);

下面用图解可能看的比较清楚：

3.旋转rotate(angle)-用于以原点为中心旋转 canvas

这里只有一个参数angle，指的是旋转的角度，而且是顺时针

下面是演示：[点击查看演示]

为了能让童鞋们看到清晰效果，我把原点移动到了(200,200)画布的中心来进行旋转。

第一个是红色方块，没使用旋转，位置没改变

第二个是黑色方块，rotate(Math.Pi/2)旋转90度，因此以原点为中心Canvas顺时针旋转了90度，到了演示的黑色方块位置

第三个是蓝色方块，也使用了rotate(Math.Pi/2)旋转90度,在原来已经改变的Canvas画布上，再顺时针旋转了90度，到了演示的蓝色方块位置

下面是图解：

好了，笔者发现最近写日志有点写的太慢了，因此今天的笔记就先到这里。