canvas高级绘图操作(平移、缩放、旋转、矩阵变换) + 案例

●save()与restore()

context对象提供了保存于恢复canvas的状态函数
1：save() ：将当前canvas中的所有状态信息保存入堆
2：restore(): 该方法用于弹出并开始使用堆最上面保存的状态信息

●translate()平移
context.translate(x,y);
x: 将坐标原点向左或右移动多少个单位
y: 将坐标原点向下或上移动多少个单位

案例 1：观察原点的位置变化

案例 2：绘制不同的花

 
    
        蓬莱菊花
        令箭荷花
    
    
    

●scale()缩放
context.scale(x,y);
x:表示水平方向缩放的倍数；
y:表示垂直方向缩放的倍数。

案例

●rotate()旋转
rotate()方法用于将画布的x轴顺时针转动到与原x轴方向成angle角的位置，转动后x轴方向同时发生变化。

●transform()矩阵变换
context.transform(ma1,ma2,mb1,mb2,dx,dy);
前4个参数：修改使用这个方法之后绘制图形时的计算方法，从而达到变形的目的；
dx/dy表示将坐标原点在x轴或y轴方向上移动；
各参数说明：水平缩放、水平倾斜、垂直倾斜、垂直缩放、水平移动、垂直移动
1：平移：使用transform(1,0,0,1,x,y)或者transform(0,1,1,0,x,y)代替translate(x,y)；
2：缩放：使用transform(x,0,0,y,0,0)方法代替scale(x,y);
3：旋转: 使用transform(
Math.cos(angleMath.PI/180),
Math.sin(angleMath.PI/180),
-Math.sin(angleMath.PI/180),
Math.cos(angleMath.PI/180),
)

案例

●setTransform()矩阵变换

setTransform()方法将变换的矩阵进行重置，它把当前的变换矩阵重置为单位矩阵
context.setTransform(ma1,ma2,mb1,mb2,dx,dy)
各参数说明：水平旋转、水平倾斜、垂直倾斜、垂直缩放、水平移动、垂直移动