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操作。