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

?

轉載于:https://www.cnblogs.com/jiangxiaobo/p/5663375.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的HTML5-Canvas 图形变换+状态保存的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。