坐标变换：平移、缩放、旋转图形的方法

对坐标的变换处理有三种方式：平移、缩放、旋转。

1）平移

移动图形的绘制主要是通过translate方法来实现的，该方法定义如下：

context.translate(x,y);

translate方法使用两个参数，x表示将坐标轴原点向左移动多少个单位，默认情况下为像素；y表示将坐标轴原点向下移动多少个单位。

2）缩放

使用图形上下文对象的scale方法将图形缩放。该方法的定义如下：

context.scale(x,y);

scale方法使用两个参数，x是水平方向的放大倍数，y是垂直方向的放大倍数。将图形缩小的时候，将这两个参数设置为0到1之间的小数就可以了，例如0.5是指将图形缩小一半。(www.xing528.com)

3）旋转

使用图形上下文对象的rotate方法将图形进行旋转。该方法的定义如下：

context.rotate(angle);

rotate方法接受一个参数angle，angle是指旋转的角度，旋转的中心点是坐标轴的原点。旋转是以顺时针方向进行的，要想逆时针旋转，将angle设定为负数就可以了。

下面利用坐标变换的方法绘制变形的图形。本例中，先绘制一个矩形，然后利用循环反复平移坐标，进行图形缩放、图形旋转，最后绘制出一个非常漂亮的变形图形，代码如下：

其运行效果，如图8.17所示。

图8.17　坐标变换实例