# 像素操作
到目前为止，我们尚未深入了解 Canvas 画布真实像素的原理，事实上，你可以直接通过 ImageData 对象操纵像素数据，直接读取或将数据数组写入该对象中。
# ImageData 对象
ImageData对象中存储着 canvas 对象真实的像素数据，它包含以下几个只读属性：
- width
- height
- data
# 创建一个 ImageData 对象
去创建一个新的，空白的 ImageData对象，你应该会使用createImageData() 方法。
const myImageData = ctx.createImageData(width, height);
const myImageData = ctx.createImageData(anotherImageData);
上面代码创建了一个新的具体特定尺寸的 ImageData对象。所有像素被预设为透明黑。
# 得到场景像素数据
为了获得一个包含画布场景像素数据的 ImageData 对像，你可以用 getImageData() 方法
const myImageData = ctx.getImageData(left, top, width, height);
# 在场景中写入像素数据
ctx.putImageData(myImageData, dx, dy);
# 保存图片
HTMLCanvasElement 提供一个 toDataURL() 方法，此方法在保存图片的时候非常有用。
canvas.toDataURL();
canvas.toDataURL('image/png');
// 默认设定。创建一个 PNG 图片。
canvas.toDataURL('image/jpeg', quality);
// 创建一个 JPG 图片。你可以有选择地提供从 0 到 1 的品质量
你也可以从画布中创建一个Blob对像
canvas.toBlob(callback, type, encoderOptions)