canvas像素操作

实际上，可以直接通过ImageData对象操纵像素数据，直接读取或将数据数组写入该对象中

1.得到场景像素数据

getImageDat(sx,sy,sw,sh)

sx:将要被提取的像素数据矩形区域的左上角X坐标

sy:将要被提取的像素数据矩形区域的左上角X坐标

sw:将要被提取的像素数据矩形区域的宽度

sh:将要被提取的像素数据矩形区域的高度

2.ImageData对象

ImageData对象中储存着canvas对象真实的像素数据，它包含一下几个只读属性：

width：图片宽度，单位是像素

height：图片高度，单位是像素

data: Uint8ClampedArray类型的一维数组，

包含着RGBA格式的整数数据。范围是0~255之间

R：0 —–> 255(黑色到白色)

G：0 —–> 255(黑色到白色)

B：0 —–> 255(黑色到白色)

A：0 —–> 255(透明到不透明)


window.onload = function () {
        var canvas = document.getElementById("test");
        var ctx = canvas.getContext("2d");
        ctx.fillRect(0, 0, 100, 100);
        //应该是10000个像素点
        //实际上由40000个数据，包含RGBA四个数值
        var imageData = ctx.getImageData(0, 0, 100, 100);
        for (var i = 0; i <= imageData.data.length; i++) {
          imageData.data[4 * i + 3] = 100;
        }
        ctx.putImageData(imageData, 0, 0);
      };

3.在场景中写入像素数据

putImageData()方法去对场景进行像素数据的写入
putImageData(ImageData，dx，dy)
dx，dy参数表示写入像素的左上角坐标

4.创建一个ImageData对象

ctx.createImageData(width,height);
width:ImageData 新对象的宽度
height:ImageData 新对象的高度

版权声明：本文为yang10086原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/yang10086/p/16686831.html