canvas像素操作

像素操作 相关方法：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);