iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
Modern Web

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

Day3 - Canvas基礎概論 II - 成為Canvas Ninja ~ 理解2D渲染的精髓!

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上

在這個系列的文章中,我會針對比較常見的兩種環境(2D,webgl)做案例探討。

Start From 2D

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

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


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

尚未有邦友留言

立即登入留言