html5 canvas系列教程-像素操做（反色，黑白，亮度，復古，蒙版，透明）

getImageData：獲取一張圖片的像素數據
cxt.getImageData( x, y, width, height )
x：圖片所在的x座標
y: 圖片所在的y座標
width,height 要獲取的像素區域
返回值是一個對象，對象包括一個data屬性， 寬度，高度. data屬性是一個巨大的數組，數組中存儲的是這張圖片的全部像素信息，每四個一組組成一個像素點的信息，如：
[r1,g1,b1,a1, r2,g2,b2,a2...]， r( 紅色) g( 綠色) b( 藍色 ) a( 透明度 )
putImageData：輸出像素圖片
putImageData( 像素對象, x, y )
注意：getImageData會產生跨域問題，因此你的程序要放在web服務器下，我這裏是放在phpstudy下面.

若是有興趣學習web前端的小夥伴，能夠來個人web前端學習君羊哦5753，08719能夠免費領取精品的web前端學習教程一份哦！

我這張圖片的尺寸是200 x 200.
一：反色效果
算法：把每個像素的r, g, b顏色取反就行，也就是( 255 - 原來的值 )

2、黑白效果（灰度圖）
將彩色圖片轉換成黑白圖片，原理：求r(data[i]), g(data[i+1]), b(data[i+2])三個通道的平均值，而後把這個平均值賦值給r, g, b

也能夠分配rgb的灰度比例

3、調節亮度的強弱
在r、g、b、通道上加上一正值就是變亮，加上負值就是變暗

變暗：
data[i] -= 30;
data[i+1] -= 50;
data[i+2] -= 50;

4、復古效果
將r, g, b按比例混合相加。

5、藍色蒙版
藍色 蒙版就是讓圖片偏藍色，將藍色通道賦值爲 r, g, b三原色的平均值，把綠色，紅色通道設置爲0，其餘蒙版效果，只要設置對應的通道平均值，關閉其餘通道便可.

6、透明度
這個很簡單，只要把透明度乘以一個0~1之間的值便可。跟css的opacity同樣

7、createImageData：根據圖片或者某個寬度與高度建立一個像素區域
cxt.createImageData( w, h )
cxt.createImageData( imgData )
w, h:建立區域的寬度與高度
imgData: 建立的區域與這個像素區域的寬度和高度相同，imgData就是經過getImageData獲取到圖片像素的 返回值
1，根據一個圖片的寬度與高度，建立一個透明的紅色像素區域

2，自定一個200 x 200的藍色透明像素區域