### 说明 > canvas元素标签强大之处在于可以直接在HTML上进行图形操作，具有极大的应用价值。 canvas 可以实现对图像的像素操作，这就要说到 getImageData()方法了。 ### 解释 `CanvasRenderingContext2D.getImageData()` 返回一个 ImageData对象，用来描述 canvas 区域隐含的像素数据，这个区域通过矩形表示，起始点为(sx, sy)、宽为sw、高为sh。 #### 语法 `ctx.getImageData(sx, sy, sw, sh);` #### 参数 `sx`：将要被提取的图像数据矩形区域的左上角 x 坐标。 `sy`：将要被提取的图像数据矩形区域的左上角 y 坐标。 `sw`：将要被提取的图像数据矩形区域的宽度。 `sh`：将要被提取的图像数据矩形区域的高度。 #### 返回值 一个 ImageData 对象，包含 canvas 给定的矩形图像数据。 ImageData对象会有三个属性，`height`、`width` 和 `data`。 ImageData.height 使用像素描述 ImageData 的实际高度，这个值其实等于 getImageData()方法中的参数 `sh` ImageData.width使用像素描述 ImageData 的实际宽度。这个值其实等于 getImageData() 方法中的参数 `sw` ImageData.data 一个一维数组，包含以 RGBA 顺序的数据，数据使用 0 至 255（包含）的整数表示。  #### 注意 如果高度（sh）或者宽度（sw）变量为0，则会抛出错误。 ### 示例 以上是需要知道的基本知识，下来看几个例子吧！ ### 颜色选择器 **效果图**  **实现思路** 1、先把图片画到 canvas 上，2、获取鼠标移动时的坐标并通过 getImageData() 方法，获取这一个点的像素，3、得到像素信息后，拼接出 `rgba` 的字符串，再设置下面的小正方形的背景是这个颜色。 **代码请点**[**这里**](https://codepen.io/FEWY/pen/NLMRPE) ### 图片灰度 **效果图**  **实现思路** 1、先在 canvas 上画出图片，2、通过 getImageData()方法，获取整个 canvas 上的像素信息，3、点击按钮时，遍历获取到的像素信息的每个像素的 红色值、绿色值 和 蓝色值，相加求出平均值，再把平均值赋值给红色、绿色和蓝色，这么做是为了求出每个像素的灰度，4、然后把改变后的像素信息，通过 putImageData() 方法重新添加到 canvas中，就实现了图片灰度的效果。 **代码请点**[**这里**](https://codepen.io/baoztou/pen/ZEeMOLW?editors=0010%22) ### 马赛克 **效果图**  **实现思路** 1、先在 canvas 上画出图片，2、通过 getImageData()方法，获取整个 canvas 上的像素信息，3、行列遍历获取到的像素信息的每个像素的 红色值、绿色值 和 蓝色值,通过rgb设置fillStyle颜色和遍历的x，y给到fillRect设置正方形的位置、大小，通过设置好颜色的多个正方形来达到马赛克效果。 **代码请点**[**这里**](https://codepen.io/baoztou/pen/rNyYREx?editors=1010%22)