首先士八，當(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)震桶。
