HTML5-Canvas 图形变换+状态保存

1. 图形变换

canvas是基于状态绘制图形的。故此一般情况下，canvas的绘制的图形路径和状态时分离的。

function drawShape(ctx){

    // 绘制路径
    shapePath(ctx);

    // 进行填充或者绘制
    // ...
}

function shapePath(ctx){

    ctx.beginPath();

    // 图形路径
    // ...
    
    ctx.closePath();

}

在填充或绘制之前可以调用一些状态或者图形变换的来设置当前绘制图形的状态。

这里所说的图形变换大致指的就是：

1> 位移 translate(x,y) : 将canvas画布进行位移显示。将坐标原点移动到(x,y)的位置，translate将原点移动之后，如果再次调用translate进行移动，那么会依照上一个translate移动之后作为原点参考。

2> 旋转 rotate(deg) : 将canvas画布进行旋转显示

3> 缩放 scale(sx,sy) : 将canvas画布进行缩放显示

2.canvas状态的保存和恢复

save()函数：保存当前的图形状态

restore()函数：返回save()函数保存时候的状态

function drawShape(ctx){

    ctx.save(); // 状态保存

    // 绘制路径
    shapePath(ctx);

    // 进行填充或者绘制
    // ...
    
    ctx.restore(); // 状态恢复
}

function shapePath(ctx){

    ctx.beginPath();

    // 图形路径
    // ...
    
    ctx.closePath();

}

 

 3. 变换矩阵

transform(a,b,c,d,e,f)状态会叠加。

 

 setTransform(a,b,c,d,e,f)将变换矩阵首先变成单位矩阵，然后在对传入的参数进行图形变换，会忽略之前所有的transform操作。