Some Deeper Basics

圖像的概念

我們在前面有說到，canvas本身是透過物件模型來繪製圖像，但是我們沒有提到何謂"圖像"。

實際上圖像的概念很簡單。

大家都知道，光的三原色分別是紅/藍/綠; 一束標準的白光，可以分裂成紅/藍/綠光來看。

而圖像的實作原理，其實就是透過阻擋掉紅/藍/綠光一部分的佔比，來形成不同的顏色。

這邊我找了兩張圖片，這兩張圖片很好的說明了在計算機領域中圖像的概念(圖片來源：https://dev.to/)

一個圖像，其實可以直接被視為一大群像素的集合體，而每一個像素都具備了能分別對應三種光線(RGB)，還有透明值(alpha)的篩子,這些篩子就是所謂的通道(Channel)

透明值的通道，光看字面上可能不太好理解他在數理上的意義，所以這邊我也找到了一個網頁，這個網頁上的範例可以為我們做一個適當的解釋。

https://borderleft.com/toolbox/rgba/

這是一個能夠顯示rgba顏色跟不同顏色底混合之後的樣子的網站，這邊我把底色設定為白色，也就是說合成出來的顏色就是該rgba色放置於白背景時候的樣子。

圖片中我們看到，當alpha設置為0.7時, R和G通道的0(也就是完全阻絕RG光線)，他們的阻擋量(也就是255 - 0 = 255)都分別被乘以0.3而得到77這個數值，而B光線因為阻擋量是0, 所以最後在B數值上還是得到255，最終則呈現出(77,77,255)這個顏色。

從這邊我們就可以推論，alpha的數理意義其實就是同步的對三個通道的數值做比例性的消減。

從像素觀點來看Canvas

一張Canvas，其實也就是一個圖像，他也是由非常多個像素所組成，而每一個像素點上又各自都有rgba四個通道。

一張寬度100px, 高度100px的canvas，它實際上就是100*100 = 10000個像素的集合體，而同時在程序上我們則可以把它轉換成一個長度為100*100*4的陣列(也就是一共40000個channel值)

而所謂的『像素操作』，其實就是一種陣列運算，我們可以透過去疊加/轉換/削除陣列中的一部分channel值，來達到產生新圖像的效果。

Photoshop的濾鏡運算(例如彩色轉灰階)，或是在社群軟體上有時候可以看到的圖片轉符號(拼字圖畫)，就是典型的像素操作技術之運用。

另外，關於Canvas的寬高數值定義其實有一個有趣的點。

實際上在定義一張canvas的大小時，並不是使用css來賦值，而是使用width和height這兩個attribute，直接下在canvas元素上面。

只有width和height這兩個attribute數值才能夠直接定義canvas的像素總量，而如果這時硬是要用css去擴大一張100＊100的canvas為10000px*10000px，就會出現像素密度過低(也就是圖像模糊的情形)的狀況

關於Canvas的像素操作技術，我們在之後的章節會提到更多實操的範例。

Context? What The Hell Is That?

SO, 你在前面的介紹文一直提到『渲染環境』這一個詞彙，那個到底指的是什麼？

初來乍到的同學對於『渲染環境』這一個詞可能相當的陌生。
但是如果過去曾經有電腦繪圖/3D建模相關知識的人可能就能快速的領會這個詞所代表的意義。

『渲染環境』其實指的是透過canvasElement.getContext(type)這一個api所取得的一個物件。
我們其實可以把『渲染環境』想像成是繪圖軟體(例如小畫家)的概念，環境中會具備大量的工具（就像小畫家會提供畫圓形畫方形的功能），讓使用者可以應用在繪圖程序中。

『渲染環境』實際的提取方式如下：

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

getContext(type) 這一個方法可以根據輸入的type字串來取得操作者所想要使用的渲染環境，而在目前html5的規制下，一共有四種渲染環境可供選擇，分別是:

• 2d : 最基礎同時也最適合新手入門的渲染環境，具備多種2d繪圖的api
• webgl : 是一種速度更快，功能更多，具備原生 3D API，可讓使用者能夠完全訪問渲染管道的渲染環境。(很多人可能會誤會3D圖像只能透過webgl渲染環境所提供的api來達成，但實際上不是的，這點後面的章節會講。)
• webgl2 : 簡而言之就是webgl環境的上位版，具備更多的功能，但是相對的，對部分舊型瀏覽器/移動裝置瀏覽器的支援度也略低，算是實驗性的功能
• bitmaprenderer : 這也同樣是一種只有少數瀏覽器有支援的實驗性功能，它的用途很單純，是用來轉移指定圖像的bitmap到指定的canvas上

Start From 2D

雖然說講到網頁前端的Canvas技術，大多數人都會直接地想到像是Three.js/Webgl那樣的渲染環境/套件做出來的各種絢麗特效。
但是我個人認為，初學Canvas應該還是先從2D的基礎學起，雖然說到了webgl渲染環境時，webgl環境整體提供的API和2D環境所提供的API在本質上有很巨大的差異，但是實際上在做渲染運算、模型規劃時的重點還是有其相似之處。

在接下來的章節中，我們會先從2D的基礎講起，然後再開始慢慢地演進到一些更加複雜的案例～