canvas像素操作函数封装

获取单个像素点信息函数：

//	传入一个ImageData对象，x轴的坐标，y轴的坐标
function getPxInfo(imgdata,x,y){
	var color = [];
	//获取ImageData对象中的data
	var data = imgdata.data;
	//	ImageData 新对象的宽度。
	var w = imgdata.width;
	//	ImageData 新对象的高度。
	var h = imgdata.height;
	/*
	（x,y）前面有多少个像素点？
	首先，你要知道，这里的坐标轴方向，Y轴正方向朝下，X轴正方向朝右；
	举例（3，3）前面有多少个像素点：
	因为第一个像素点是(0,0),所以(3,3)在第4行，第4列。
	那么(3,3)前面还有3行整的像素，即y*w=3*4；
	（w：ImageData 新对象的宽度。它是从1开始计算的，所以w代表了宽度上真实的像素个数）
	在第4行上，(3,3)是在第4个，所以前面还有x个，即3个
	*/
	//因此得出(x,y)前面的像素个数为：  y*w+x
	// ImageData的data中每4个数值为一个像素的rgba值；data是一个数组，下标从0开始。
	//r
	color[0]=data[(y*w+x)*4];
	//g
	color[1]=data[(y*w+x)*4+1];
	//b
	color[2]=data[(y*w+x)*4+2];
	//a
	color[3]=data[(y*w+x)*4+3];
	return color;
}

获取某个像素调用函数代码示例：

var imgdata = ctx.getImageData(0,0,canvas.width,canvas.height);
//	获取(49,49)的像素的rgba信息
var color = getPxInfo(imgdata,49,49);

设置单个像素点信息函数：

// 传入一个ImageData对象，x轴的坐标，y轴的坐标，rgba值
function setPxInfo(imgdata,x,y,color){		
	var data = imgdata.data;
	var w = imgdata.width;
	var h = imgdata.height;
	//(x,y)  y*w+x   x:多少列  y：多少行
	//r
	data[(y*w+x)*4]=color[0];
	//g
	data[(y*w+x)*4+1]=color[1];
	//b
	data[(y*w+x)*4+2]=color[2];
	//a
	data[(y*w+x)*4+3]=color[3];	
}

设置某个像素点的rgba值：

var imgdata = ctx.getImageData(0,0,canvas.width,canvas.height);
//	设置(30,30)的像素点的rgba值
setPxInfo(imgdata,30,30,[0,0,0,255]);
ctx.putImageData(imgdata,0,0);

设置第x列的所有像素点的rgba值

var imgdata = ctx.getImageData(0,0,canvas.width,canvas.height);
for(var i=0;i<imgdata.width;i++){
	//	设置第30列的所有像素点的rgba值
	setPxInfo(imgdata,30,i,[0,0,0,255]);
}
ctx.putImageData(imgdata,0,0);

设置第y行的所有像素点的rgba值

var imgdata = ctx.getImageData(0,0,canvas.width,canvas.height);
for(var i=0;i<imgdata.width;i++){
	//	设置第30行的所有像素点的rgba值
	setPxInfo(imgdata,i,30,[0,0,0,255]);
}
ctx.putImageData(imgdata,0,0);