負片效果就是把現在的顏色相反後再重新繪製一張新的

所以要做的就是找出每個顏色的 [R, B, G, K]的陣列
然後把每個顏色陣列中的 R、B、G 都用255減去
再把每個變色後的點覆蓋在原圖之前

var imageData = ctx.getImageData(0, 0, cvs.width, cvs.height);
// 取得圖片資料

var data = imageData.data;
// 取得圖片每個點的顏色陣列 

for(var i = 0; i < data.length; i += 4){
	data[i] = 255-data[i];       // R
	data[i+1] = 255-data[i+1];   // G
	data[i+2] = 255-data[i+2];   // B
}
ctx.putImageData(imageData, 0, 0);

就會像下圖 左-原圖 右-顏色相反後的圖

for(var i = 0; i < data.length; i += 4){
	data[i] = 255-data[i];       // R
	data[i+1] = 255-data[i+1];   // G
	data[i+2] = 255-data[i+2];   // B
}

這部分就是在轉換顏色時最重要地方
RGB 的值是 0-255 所以用255減現在的顏色就會變成相反的顏色
還有加減色時不一定要用 255 也可以再改顏色變化小的 -50 、+50 或保持 data[i] 來做出各種變化