iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
Modern Web

成為Canvas Ninja ! ~ 理解2D渲染的精髓系列 第 4

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

進入2D渲染的世界

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

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

2D渲染環境下的座標系

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

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

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

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

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

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

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

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

這點必須要熟記。

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

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

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

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

  • 路徑/上色相關
  • 變形相關
  • 像素操作相關

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


上一篇
Day3 - Canvas基礎概論 II - 成為Canvas Ninja ~ 理解2D渲染的精髓!
下一篇
Day5 - 2D渲染環境基礎篇 II - 成為Canvas Ninja ~ 理解2D渲染的精髓
系列文
成為Canvas Ninja ! ~ 理解2D渲染的精髓31

尚未有邦友留言

立即登入留言