最近因為工作上的需要,花了點時間研究一下Canvas的使用,目前許多工作職缺強調HTML5的,大多指的是對Canvas或video這類新標籤的熟悉,Canvas是一個畫布系統,採點陣圖的方式來呈現,搭配javascript後,除了簡單的平面圖形之外,也可以拿來做成動畫或遊戲。

我的練習是從做一個網頁小畫家開始的,一開始的功能還算簡單,畫畫線條,改改顏色什麼的都還不難,後來想到選顏色這件事是否能直接用Canvas來做一個時,花了我不少時間,一開始採用計算顏色然後畫出來的方式,感覺顏色怪怪的,研究後發現無法單畫一個點,內建函式提供的指令中沒有單獨畫一個點的功能,至少是兩點一線或是矩形,後來一路研究下去,發現要直接去操作Canvas的象素單位陣列,這牽涉到Canvas的原理是把一張畫布上的每個點的色彩資訊以一維陣列的方式展開的,為了製作這個陣列,我得把原本用來算色盤的HSL色系再改成RGB的色系再寫回去陣列才可以,所以我又花了時間研究色彩系統的轉換公式,最後是stackoverflow上找現成的來套用,做出來的成果如下圖,差異在於色彩的準確度上,使用畫線的方式來製作的色盤因為計算出來的hsl數值存在著一些誤差,在函式的自行進位後有許多相鄰坐標的顏色其實是同一色,所以看起來漸層模糊比較嚴重,而使用轉換公式再轉回rgb後,色彩的數值範圍變大,因此重覆的色彩數值減少,色盤看起來的顏色就比較飽滿一些。

色盤差異

後面有時間會再繼續研究一些比較實務的操作,象是圖表的製作或是小遊戲的製作。

最後修改日期: 2018-06-09

留言

撰寫回覆或留言

發佈留言必須填寫的電子郵件地址不會公開。