canvas像素操作

时间:2023-03-08 15:46:33

像素操作 相关方法:getImageData(x,y,w,h);  putImageData(oImg,x,y);  createImageData(w,h);

1.getImageData(x,y,w,h);  参数依次是x,坐标,宽高。得到指定区域的像素数据。例如:

var oImg = oGC.getImageData(0,0,100,100);

这样得到一个包含像素数据的对象oImg;

oImg.width   //表示一行的像素个数,这里等于100

oImg.height  //表示一列的像素的个数,这里等于100

oImg.data  //一个数组,表示像素数据,这里oImg.data.length等于40000.因为数组中的4个值表示一个像素,即一个像素的rgba值。

2.putImageData(oImg,x,y)  参数依次是像素数据的对象,坐标

3.createImageData(w,h)  创建一个包含像素数据的对象。

var oImg = oGC.createImageData(100,100);

    for(var i=0;i<oImg.width*oImg.height;i++){

        oImg.data[4*i] = 255;
oImg.data[4*i+1] = 0;
oImg.data[4*i+2] = 0;
oImg.data[4*i+3] = 100; } oGC.putImageData(oImg,100,100);