這篇文章給大家分享的是有關(guān)HTML5 Canvas坐標(biāo)轉(zhuǎn)換的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)整合營(yíng)銷推廣、網(wǎng)站重做改版、道外網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、成都商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為道外等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

在Canvas繪圖過程中，坐標(biāo)始終是從左上角的起始位置開始的。但是，在實(shí)際的開發(fā)中，常常有多個(gè)元素的坐標(biāo)系統(tǒng)混合在一起，translate()是一個(gè)非常有用的轉(zhuǎn)換元素坐標(biāo)的方法。

示例代碼如下：

save(); //將當(dāng)前繪圖狀態(tài)壓入棧中保存

ctx.translate(100,100); //開始轉(zhuǎn)換坐標(biāo)

... //進(jìn)行計(jì)劃中的操作

restore(); //恢復(fù)坐標(biāo)系統(tǒng)

以上操作非常類似于一個(gè)印刷機(jī)的工作。印刷機(jī)在真實(shí)工作環(huán)境中，是紙不動(dòng)，噴頭在運(yùn)動(dòng)，而在Canvas繪圖過程中，實(shí)際上是“噴頭”并未移動(dòng)，而是畫布在不停地移動(dòng)（轉(zhuǎn)換繪圖坐標(biāo)）。

注意，在轉(zhuǎn)換坐標(biāo)原點(diǎn)之前，千萬別忘了保存狀態(tài)，當(dāng)然，繪制完畢后也別忘了恢復(fù)狀態(tài)，否則會(huì)造成繪圖層污染，產(chǎn)生意想不到的錯(cuò)誤。

感謝各位的閱讀！關(guān)于“HTML5 Canvas坐標(biāo)轉(zhuǎn)換的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！