canvas绘画的基本处理方式

改变背景的颜色！

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

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

//getImageData()取的原始图像数据 的像素

//有四个参数：第一二个参数，开始获取像素的x，y坐标，第三四个参数，获取像素点的宽高。

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属性是一个数组，保存着图像中每一个像素的数据。

//在data数据中，每一个像素用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()方法把图像数据绘制到画布上，有三个参数

//第一个参数获取的ImageData，第二三个参数，，要放到画布上的x，y坐标

context.putImageData(ImageData,0,0);

}

/*data属性是一个数组，保存着图像中每一个像素的数据。

* 在data数据中，每一个像素用4个元素来保存，分别代表红、绿、蓝和透明度。

* 数组中的每个元素都是介于0和255之间的，能够直接访问到原始图像数据，

* 就能够以各种方式来操作这些数据。

*/