像素控制

前面幾天都沒有真正的瞭解canvas裡的像素，今天就來好好探討一下吧～
使用ImageData物件，可直接對canvas裡的像素陣列資料讀(read)和寫(write)。
接下來也會了解如何使影像平面化(反鋸齒)以及如何將影像保存在canvas中。

像素控制

ImageData儲存著canvas真實的像素數據，包含以下幾個屬性：

Uint8ClampedArray白話一點來說就是會把物件的總像素變成一個一維陣列，包含height × width× 4 bytes的資料,同索引值從0到 (height×width×4)-1，而每一個像素用4個1byte值做代表分別為紅，綠，藍，透明值(也就是RGBA格式)，ex：左上角的第一個像素資料就會在陣列的索引0(紅),1(綠),2(藍),3(透明)中。

也可以使用Uint8ClampedArray.length屬性來讀取像素的陣列大小

ex:讀取的物件綠色組成的值。從像素的第100欄、第30行，如以下:

greenComponent=imageData.data[((30 * (imageData.width * 4)) + (100 * 4)) + 1]

小小範例-Color Picker

大家有用過chrome類似像Color Picker的extendsion嗎？
今天利用前面學到的一個方法getImageData()來做一個很像colorpicker的東西～
滑鼠移到畫布裡的哪裡就會顯示那塊像素的顏色
codepen範例連結

pick(e){
  let X=e.x ? e.x-this.canvasX:0 //取得滑鼠Ｘ位置
  let Y=e.y ? e.y-this.canvasY:0 //取得滑鼠Ｙ位置
  let pixel=this.ctx.getImageData(X,Y,1,1)  //取得像素資料
  let data=pixel.data
     this.color='rgba(' + data[0] + ',' + data[1] +',' + data[2] + ',' + (data[3] / 255) + ')' //將顏色資料綁到data裡
  },

最後成果:

～如有疑問或是錯誤，歡迎不吝指教～

參考來源：
[1]https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas