对坐标的变换处理,有如下三种方式。
平移
移动图形的绘制主要是通过translate 方法来实现的,该方法定义如下所示。
context. translate(x, y);
translate 方法使用两个参数——x表示将坐标轴原点向左移动多少个单位,默认情况下
为像素;y表示将坐标轴原点向下移动多少个单位。
缩放
使用图形上下文对象的scale方法将图形缩放。该方法的定义如下所示。
context.scale(x,y);
scale方法使用两个参数,x是水平方向的放大倍数,y是垂直方向的放大倍数。将图形缩
小的时候,将这两个参数设置为0到1之间的小数就可以了,例如0.5是指将图形缩小一
半。
旋转
使用图形上下文对象的rotate方法将图形进行旋转。该方法的定义如下所示。
context.rotate(angle);
rotate方法接受一个参数angle,angle是指旋转的角度,旋转的中心点是坐标轴的原点
。旋转是以顺时针方向进行的,要想逆时针旋转时,将angle设定为负数就可以了。
绘制变形的图形