7:像素操作
ctx.getImageData(x,y,w,h)
ImageData对象
width：选中区域在横向上css像素的个数
height：选中区域在纵向上css像素的个数
data:数组 //修改data数组中的rbg值可以更改颜色和透明度
//具体查看API
选中区域所有像素点的rgba信息，rgba的取值从0到255
ctx.putImageData(imgdata,x,y)
ctx.createImageData(w,h)
返回的是imgdata对象 默认像素点的信息是rgba(0,0,0,0)
//单像素操作 html5只提供多像素的API一块区域
//单像素操作
//获取整个画布的像素
var ImageData = ctx.getImageData(20,20,100,100);
//更改某个地方的像素
setPxInfo(ImageData,25,25,[0,0,0,255]);
ctx.putImageData(ImageData,20,20);
function getPxInfo(imgdata,x,y){
var color = [];
var data = imgdata.data;
var w = imgdata.width;
var h = imgdata.height;
//(x,y) x*w+y
//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;
}
function setPxInfo(imgdata,x,y,color){
var data = imgdata.data;
var w = imgdata.width;
var h = imgdata.height;
//(x,y) x*w+y x:多少列 y：多少行
//r
data[(y*w+x)*4]=color[0];
//g
data[(y*w+x)*4+1]=color[1]; //画布是一个imgdata.width* imgdata.height，二位数组，里面存储一个像素是占4个位置，需要*4
//b
data[(y*w+x)*4+2]=color[2];
//a
data[(y*w+x)*4+3]=color[3];
}//需要注意坐标轴
实例：马赛克
https://github.com/Hightinstance/practice/tree/master/Maseke