Canvas入门基础(七):像素操作
一个新的具体特定尺寸的ImageData对像。所有像素被预设为透明黑。var imgData=cxt.createImageData(width,height);
var imgData=cxt.createImageData(100,100); for(var i=0;i<imgData.data.length;i+=4){ imgData.data[i+0]=255; imgData.data[i+1]=0; imgData.data[i+2]=0; imgData.data[i+3]=255; } cxt.putImageData(imgData,10,10);
![](https://imagecloud.laixiazheteng.cn/mayuan_createImageData.png)
//第一个像素变为红色
data[0]=255; //R
data[1]=0; //G
data[2]=0; //B
data[3]=255; //A
var imgData=cxt.createImageData(imageData);
cxt.getImageData(x,y,width,height);
var img=new Image(); img.src="mm.jpg"; img.onload=function(){ cxt.drawImage(img,10,10); var imgData=cxt.getImageData(10,10,200,300); var data=imgData.data; for(var i=0;i<data.length;i+=4){ data[i]=255-data[i]; data[i+1]=255-data[i+1]; data[i+2]=255-data[i+2]; data[i+3]=255; } cxt.putImageData(imgData,230,10); }
![](https://imagecloud.laixiazheteng.cn/mayuan_getImageData.jpg)
四、在场景中写入像素数据
cxt.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
imgData 规定要放回画布的 ImageData 对象。
x ImageData 对象左上角的 x 坐标,以像素计。
y ImageData 对象左上角的 y 坐标,以像素计。
dirtyX 可选。水平值(x),以像素计,在画布上放置图像的位置。
dirtyY 可选。垂直值(y),以像素计,在画布上放置图像的位置。
dirtyWidth 可选。在画布上绘制图像所使用的宽度。
dirtyHeight 可选。在画布上绘制图像所使用的高度。