像素操作

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