getImageData()

用来描述canvas区域隐含的像素数据,这个区域通过矩形表示,起始点为(sx, sy)、宽为sw、高为sh

  ctx.getImageData(sx, sy, sw, sh);

参数

Number 将要被提取的图像数据矩形区域的左上角 x 坐标.

Number 将要被提取的图像数据矩形区域的左上角 y 坐标.

Number 将要被提取的图像数据矩形区域的宽度.

Number 将要被提取的图像数据矩形区域的高度.


测验

getImageData(10, 10, 100, 50) 返回一个ImageData对象,可用于putImageData的参数

简单的讲,就是取画布中的一块矩形区域的内容.下左图是原图,右图是其中间部分.

ImageData对象

有三个属性: "width"宽度 ,"height":高度,这两个值并不总是等于getImageData()方法传入的宽高参数.因为这参数是设备像素单位,而这两属性是css像素单位.

"data"是一个Uint8ClampedArray类型,长度等于4*width*height的数组,其中每一位元素都是一个0~255之间的数,其实它是一个8位的二进制值,是表示像素

颜色的,由公式可知,每4个元素表示一个像素颜色.即(R,G,B,A)表示法,也就是红绿蓝原色加透明度.注意透明度的取值范围也是(0~255)

那么,如果修改这个数组,那么图像就会有变化.下图将取出的部分图像,将每个像素的RGB值替换为其(R+G+B)/3,可见,变黑白的了

下图左边是自己随机填充的ImageData对象.看起来就像电视机的雪花点