1. 圖形變換

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

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

在填充或繪制之前可以調(diào)用一些狀態(tài)或者圖形變換的來(lái)設(shè)置當(dāng)前繪制圖形的狀態(tài)。

這里所說(shuō)的圖形變換大致指的就是：

1> 位移 translate(x,y) : 將canvas畫(huà)布進(jìn)行位移顯示。將坐標(biāo)原點(diǎn)移動(dòng)到(x,y)的位置，translate將原點(diǎn)移動(dòng)之后，如果再次調(diào)用translate進(jìn)行移動(dòng)，那么會(huì)依照上一個(gè)translate移動(dòng)之后作為原點(diǎn)參考。

2> 旋轉(zhuǎn) rotate(deg) :?將canvas畫(huà)布進(jìn)行旋轉(zhuǎn)顯示

3> 縮放 scale(sx,sy) : 將canvas畫(huà)布進(jìn)行縮放顯示

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

save()函數(shù)：保存當(dāng)前的圖形狀態(tài)

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

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

?

?3. 變換矩陣

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

?

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/jiangxiaobo/p/5663375.html

與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。