Canvas 紀錄 part 1
前言
這篇文章針對比較混淆幾個 Canvas api 作比較，以下分別為個別 api 講解
正文
translate 平移
如下圖,在位移之前 (灰色矩形)和位移之後 (紅色矩形)畫了兩個矩型，並標示了位移之前和位移之後原點所在的位置 （藍色 Point），由此可知畫布 在 X 軸 位移了 100 , 在 Y 軸位移了 100
Scale 縮放
scale(float sx , float sy)
將畫布 沿著 X 軸 和 Y 軸 進行縮放
如下圖，在 縮小前繪製了 灰色矩型，並標示了原本( 200,200) 的位置 ,再縮小後 繪製了 紅色矩型，標示了縮小之後 ( 200,200) 的位置，最右上角綠色的點點是 原點(0,0)
scale(float sx, float sy, float px, float py)
sx 表示 X 軸的縮放比例 , sy 表示 Y 軸的縮放比例
px py 是縮放的軸心
這個 api 原本也不太了解，後來動手操作之後就比較了解
以下是 源碼
我們模擬上面 的canvas!!.scale(0.5f, 0.5f, 400f, 400f); 畫出 同樣 左上 為（0,0）右下為 （400,400）, 但顏色不同的三個矩型，並標出原點的位置
會形成以下的圖，我們可以將 三個 矩型看成是 一個變化的過程
調用這個 api , 第一會先將 畫布做平移的動作, 也就是 px py ，我設定 px py 分別為 400 ,400 也就是 將畫布位移至 （400 ,400） 的位置
第二會將 畫布做縮小的動作, 也就是 sx sy ，我設定 sx sy 分別為 0.5f ,0.5f 也就是 畫布 X 軸 Y 軸 會被縮放成 原本的一半，
第三會將 畫布 會 將 移動的距離 回補回去，例如我們位移400 translate(400f, 400f); ，則在最後一個步驟，我們則要調用 translate(-400f, -400f) ，但這個距離好像沒有 完全移回去原本的原點(0,0) ，其實是因為我們已經進行了縮放了 0.5 ，所實際移回去的距離，可能只有 400 的一半也就是 200
如果我們完全不進行縮放， 縮放的軸心 px py 仍設定為 400 , 400 。我們看看產生的矩型會長怎樣
以下為畫出的矩型
整個過程會像下面這張圖，我們可以看到因為完全沒有縮放，所以灰色矩型被蓋過去，只剩下縮放之後的紫色矩形（大小完全一樣），因為畫布並沒有縮小，最後畫布完全移回 原點(0,0)，所以最後得到的矩型會跟執行 scale () 這個 api 之前一樣
我們可以得知這個 api ，除了 畫布會縮放 依照 sx sy 縮放比例縮放，畫布也會做移動，移動的距離 (以原本畫布的量度大小)是 x 方向的距離 px - (px * sx) , y方向的距離 py -(py * sy),如上 當 sx sy 為 0.5f 整個畫布距離 會離原本的原點 大概是 原本畫布大小 200 因為畫布縮小 所以 X 軸和 Y軸 位移回去 只有 400f *0.5f, 當 sx sy 為 1f 會沒有縮小 ，先移動畫布 X 軸和 Y軸 400 f , 最後又將畫布往回移 X 軸和 Y軸 400f *1f
rotate 旋轉
rotate(float degrees) degree 是旋轉角度 , 旋轉中心座標 會是 （0,0）, 會以旋轉中心 順時鐘旋轉。
範例 1 設定旋轉角度 45 度
會得到下圖
範例 1 設定旋轉角度 60度
rotate(float degrees, float px, float py) degree 是旋轉角度 , px py 是 旋轉中心 x 座標 與 y 座標。
範例
將旋轉中心設置於 正方形 中心點（350f,350f）, 旋轉 45 度
skew 傾斜操作
skew (float sx , float sy), sx 和 sy 是 往 x 方向和 往 y 方向的 傾斜角度 正切值 也就是 tan 值。
這個 api 操作牽涉到 三角函數的 tan
tan 公式 為 tan(θ)=對邊 /鄰邊
範例1
我們會得到以下圖示
skew(1f, 0f) 代表 往 X 方向 傾斜角度 正切值 （tan）為 1f ,往 Y 方向 傾斜角度 正切值 （tan）為 0f , 也就是 畫布 往 X 軸方向角度 傾斜 對邊與鄰邊等長 ，對邊除以鄰邊相除（tan）會是 1
範例2
我們會得到以下圖示
skew(0f, 1f) 代表 往 X 方向 傾斜角度 正切值 （tan）為 0f ,往 Y 方向 傾斜角度 正切值 （tan）為 1f , 也就是 會 畫布 往 Y 軸方向 傾斜 角度 對邊與鄰邊等長，對邊除以鄰邊相除（tan）會是 1
範例3
將 sx 設置成 3f sy 保持 0f, 也就是 畫布 會往 X 軸方向傾斜 角度 正切值（tan）對邊長與鄰邊長比例 會是 3 : 1
我們會得到以下圖示
我們可以很清楚看到 傾斜角度 的對邊與鄰邊比為 3 : 1
結尾
以上就是對這幾個 api 粗略的介紹，把它寫下來之後就可以複習，如果發現有誤，可以留言告訴我哦 > < ，我會盡快作更正
