HTML canvas中translate()與rotate()的理解

首先，當咱們在頁面上初始化canvas時，至關於在上面放了一塊畫布，這塊畫布咱們能夠理解爲上面有一個座標系(以下圖)，左上角是原點，往右是X軸的正方向，往下是Y軸的正方向，咱們在畫布上繪製的內容都是基於這個座標系完成，可是有時候咱們須要對繪製的內容進行調整，例如將上面的一個圖形旋轉某個角度，或者在畫布正中心畫一個圖形，咱們就能夠經過translate和rotate將座標系進行移動以後再進行繪製.

還有，rotate的旋轉是以原點爲基準進行旋轉，，這一點很重要

功能與參數介紹

函數	參數	描述
translate	dx,dx	將座標系在X軸和Y軸移動的距離
rotate	angle	座標系旋轉的角度，順時針爲正,，逆時針爲負
save		保存當前座標系的狀態
restore		恢復上一次座標系狀態

當咱們不對畫布進行旋轉和移動的時候，在上面繪製一個矩形，是這樣子的

能夠看到此時是基於左上角進行繪製的，若是咱們用translate將它向右和向下移動200px和100px呢

能夠看到，畫布位置沒有改變，咱們移動的只是座標系，若是咱們繼續在上面繪製圖形，仍然是以如今這個位置的座標系爲準，若是咱們只想在這個位置畫一次以後就恢復座標系原始位置，咱們應該在移動以前調用save()保存狀態，繪製後調用restore()恢復.

若是咱們想將最開始的矩形以自身中心旋轉90°呢，想看代碼和效果圖

emmmm...沒有計算好，致使有點跑偏，可是它仍是以本身爲中心轉了90°，可是沒事，不影響理解rorate和translate這兩個函數配合的理解。
首先看紅色框中的第一行代碼，執行後坐標系是這樣的

第二行代碼旋轉後是這樣的

注意看此時X軸和Y軸已經改變，以及正方向的方向。第三行代碼執行後以下

• 爲何會往右上方跑呢？由於咱們translate中的參數是負數，而此時座標軸的正值方向是左邊和下邊，因此是往右邊和上邊跑
• 爲何原點會跑出畫布以外？由於X軸移動的距離是width/2，而豎直方向空間不足，就繼續往上走了。

經過座標系來講明這兩個函數主要是由於最近作的一個項目中須要將畫布上面繪製的圖片以圖片自身爲中心旋轉90°或者180°，而看了許多博客後比較少經過座標系來說解這兩個函數，嘗試了好久以後發現經過座標系來理解雖然麻煩，可是感受簡單點。