像素操作
最后更新于：2022-04-02 01:28:05
## 像素操作
**一、ImageData对象**
ImageData对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性： width 图片宽度，单位是像素 height 图片高度，单位是像素 data 包含着RGBA格式的整型数据，范围在0至255之间（包括255）。
我们具体来看看`data`属性：
`data` 属性返回一个对象，该对象包含指定的 ImageData 对象的图像数据。
对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：
R - 红色（0-255）
G - 绿色（0-255）
B - 蓝色（0-255）
A - alpha 通道（0-255; 0 是透明的，255 是完全可见的）
color/alpha 信息以数组形式存在，并存储于 ImageData 对象的 data 属性中。
**二、 创建一个ImageData对像**
有两个版本的 `createImageData()` 方法：
**2.1 以指定的尺寸（以像素计）创建新的 ImageData 对象**
```
var imgData=cxt.createImageData(width,height);
```
一个新的具体特定尺寸的ImageData对像。所有像素被预设为透明黑。
实例：canvas-demo/createImageData.html：
下面的代码中，我创建了一个`100*100`像素的 ImageData 对象，然后为每个像素添加颜色
```
var imgData=cxt.createImageData(100,100);
for(var i=0;i
';