Day4 - 2D渲染環境基礎篇 I - 成為Canvas Ninja ～ 理解2D渲染的精髓

發表於 更新於 分類於

進入2D渲染的世界

我們在前面的章節有提到，任何Canvas的相關程序，起手式必定是先取得渲染環境，所以2D渲染程序的第一步當然也就是先取得2D得渲染環境

1
2
let cvs = document.querySelector('canvas');
let ctx = cvs.getContext('2d'); //這個ctx就是2d模式的渲染環境

2D渲染環境下的座標系

在國高中上數學課的提到座標系時，我們會很習慣的去畫一個X軸向右為正，Y軸向上為正的座標軸，像這樣的座標系也就是所謂的『卡氏座標』，他是一種遵循右手定則的坐標系。

我猜大家應該都已經把過去學過的數學/理化都還給老師了，所以這邊我們稍微複習一下『右手定則』這個概念：

所謂的『右手定則』指的是：

把右手伸出來，掌心朝自己，四指的方向會跟上圖Y軸同向，而大拇指方向則跟X軸同向，同時，你不管怎麼旋轉這張圖，你都可以用你的右手(手心必須朝自己)四指去比出Ｙ軸方向/用大拇指比出Ｘ軸方向，這就是所謂的『右手定則座標系』

但是在Canvas 2D渲染環境的世界中，它所採取的座標系並不是『右手定則座標系』，而是『左手定則座標系』。

『左手定則座標系』其實就是『右手定則座標系』的鏡像版～也就是說，我們其實可以直接把上面這張圖水平翻轉，它就直接成為了『左手定則座標系』，這時候你會發現，像剛剛同樣的操作，會變成只有左手才做得到。

接著是重點，『左手定則座標系』和 『右手定則座標系』雖然看上去好像很相像，但最重要的差別就在於：

右手定則的座標系，逆時針是正的旋轉方向，但是左手定則的座標系，順時針才是正的旋轉方向

這點必須要熟記。

2D渲染環境下常見的API與Property

實際上，比起我們之後會提到的webgl環境，2D渲染環境的API在使用上都相當的直觀而且單純（當然，這也同時意味著2D渲染的難點不在於對API的理解，而是在於運算的過程）

隨然說2D渲染環境的api數量繁多，但是為了避免一條一條介紹有點流水帳，

在這邊我把常見的API/Property劃分成三種類型：

  • 路徑/上色相關

  • 變形相關

  • 像素操作相關

    在接下來的章節中我會根據上述的三種類型，一一介紹三種類型中常用的api和這些api相關的基礎常識