改變背景的顏色！

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

//getImageData()取的原始圖像數(shù)據(jù) 的像素

//有四個參數(shù)：第一二個參數(shù)，開始獲取像素的x，y坐標，第三四個參數(shù)，獲取像素點的寬高。

var img = new Image();

img.src = "img/01.png";

img.onload = function() {

context.drawImage(img, 0, 0);

//起始位置和，范圍

var ImageData = context.getImageData(0, 0, img.width, img.height);

//data屬性是一個數(shù)組，保存著圖像中每一個像素的數(shù)據(jù)。

//在data數(shù)據(jù)中，每一個像素用4個元素來保存，

var data = ImageData.data;

for(var i = 0; i < data.length; i += 4) {

var r = data[i];

var g = data[i + 1];

var b = data[i + 2];

/*gray=(r+g+b)/5? 除以的顏色可以改變顏色！*/

var gray=(r+g+b)/3;

data[i]=gray;

data[i+1]=gray;

data[i+2]=gray;

}

//putImageData()方法把圖像數(shù)據(jù)繪制到畫布上，有三個參數(shù)

//第一個參數(shù)獲取的ImageData，第二三個參數(shù)，，要放到畫布上的x，y坐標

context.putImageData(ImageData,0,0);

}

/*data屬性是一個數(shù)組，保存著圖像中每一個像素的數(shù)據(jù)。

* 在data數(shù)據(jù)中，每一個像素用4個元素來保存，分別代表紅、綠、藍和透明度。

* 數(shù)組中的每個元素都是介于0和255之間的，能夠直接訪問到原始圖像數(shù)據(jù)，

* 就能夠以各種方式來操作這些數(shù)據(jù)。

*/