首先士八,當(dāng)我們在頁面上初始化canvas時,相當(dāng)于在上面放了一塊畫布琅拌,這塊畫布我們可以理解為上面有一個坐標(biāo)系(如下圖)缨伊,左上角是原點(diǎn),往右是X軸的正方向进宝,往下是Y軸的正方向刻坊,我們在畫布上繪制的內(nèi)容都是基于這個坐標(biāo)系完成,但是有時候我們需要對繪制的內(nèi)容進(jìn)行調(diào)整即彪,例如將上面的一個圖形旋轉(zhuǎn)某個角度紧唱,或者在畫布正中心畫一個圖形,我們就可以通過translate和rotate將坐標(biāo)系進(jìn)行移動之后再進(jìn)行繪制.
還有隶校,rotate的旋轉(zhuǎn)是以原點(diǎn)為基準(zhǔn)進(jìn)行旋轉(zhuǎn)漏益,,這一點(diǎn)很重要
功能與參數(shù)介紹
函數(shù) | 參數(shù) | 描述 |
---|---|---|
translate | dx,dx | 將坐標(biāo)系在X軸和Y軸移動的距離 |
rotate | angle | 坐標(biāo)系旋轉(zhuǎn)的角度深胳,順時針為正,绰疤,逆時針為負(fù) |
save | 保存當(dāng)前坐標(biāo)系的狀態(tài) | |
restore | 恢復(fù)上一次坐標(biāo)系狀態(tài) |
當(dāng)我們不對畫布進(jìn)行旋轉(zhuǎn)和移動的時候,在上面繪制一個矩形舞终,是這樣子的
可以看到此時是基于左上角進(jìn)行繪制的轻庆,如果我們用translate將它向右和向下移動200px和100px呢
可以看到癣猾,畫布位置沒有改變,我們移動的只是坐標(biāo)系余爆,如果我們繼續(xù)在上面繪制圖形纷宇,仍然是以現(xiàn)在這個位置的坐標(biāo)系為準(zhǔn),如果我們只想在這個位置畫一次之后就恢復(fù)坐標(biāo)系原始位置蛾方,我們應(yīng)該在移動之前調(diào)用save()保存狀態(tài)像捶,繪制后調(diào)用restore()恢復(fù).
如果我們想將最開始的矩形以自身中心旋轉(zhuǎn)90°呢,想看代碼和效果圖
emmmm...沒有計(jì)算好桩砰,導(dǎo)致有點(diǎn)跑偏拓春,但是它還是以自己為中心轉(zhuǎn)了90°,但是沒事亚隅,不影響理解rorate和translate這兩個函數(shù)配合的理解硼莽。
首先看紅色框中的第一行代碼,執(zhí)行后坐標(biāo)系是這樣的
第二行代碼旋轉(zhuǎn)后是這樣的
注意看此時X軸和Y軸已經(jīng)改變煮纵,以及正方向的方向懂鸵。第三行代碼執(zhí)行后如下
- 為什么會往右上方跑呢?因?yàn)槲覀僼ranslate中的參數(shù)是負(fù)數(shù)行疏,而此時坐標(biāo)軸的正值方向是左邊和下邊矾瑰,所以是往右邊和上邊跑
- 為什么原點(diǎn)會跑出畫布之外?因?yàn)閄軸移動的距離是width/2隘擎,而豎直方向空間不足,就繼續(xù)往上走了凉夯。
通過坐標(biāo)系來說明這兩個函數(shù)主要是因?yàn)樽罱龅囊粋€項(xiàng)目中需要將畫布上面繪制的圖片以圖片自身為中心旋轉(zhuǎn)90°或者180°货葬,而看了許多博客后比較少通過坐標(biāo)系來講解這兩個函數(shù),嘗試了很久之后發(fā)現(xiàn)通過坐標(biāo)系來理解雖然麻煩劲够,但是感覺簡單點(diǎn)震桶。