1. 圖形變換

canvas是基于狀態(tài)繪制圖形的。故此一般情況下，canvas的繪制的圖形路徑和狀態(tài)時分離的。

function drawShape(ctx){// 繪制路徑 shapePath(ctx);// 進行填充或者繪制// ... }function shapePath(ctx){ctx.beginPath();// 圖形路徑// ... ctx.closePath();}

在填充或繪制之前可以調用一些狀態(tài)或者圖形變換的來設置當前繪制圖形的狀態(tài)。

這里所說的圖形變換大致指的就是：

1> 位移 translate(x,y) : 將canvas畫布進行位移顯示。將坐標原點移動到(x,y)的位置，translate將原點移動之后，如果再次調用translate進行移動，那么會依照上一個translate移動之后作為原點參考。

2> 旋轉 rotate(deg) :?將canvas畫布進行旋轉顯示

3> 縮放 scale(sx,sy) : 將canvas畫布進行縮放顯示

2.canvas狀態(tài)的保存和恢復

save()函數：保存當前的圖形狀態(tài)

restore()函數：返回save()函數保存時候的狀態(tài)

function drawShape(ctx){ctx.save(); // 狀態(tài)保存// 繪制路徑 shapePath(ctx);// 進行填充或者繪制// ... ctx.restore(); // 狀態(tài)恢復 }function shapePath(ctx){ctx.beginPath();// 圖形路徑// ... ctx.closePath();}

?

?3. 變換矩陣

transform(a,b,c,d,e,f)狀態(tài)會疊加。

?

?setTransform(a,b,c,d,e,f)將變換矩陣首先變成單位矩陣，然后在對傳入的參數進行圖形變換，會忽略之前所有的transform操作。

?

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

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

總結

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

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