Canvas的imageData与常见像素操作方法

Posted 2022-08-24 liangklfang

本章节重点讲解了 Canvas 中的 ImageData，同时通过举例介绍了几个最核心的像素操作方法 drawImage、getImageData、createImageData、putImageData 等。同时也以一个 Canvas 下载的示例、像素拷贝示例讲解了 drawImage 在真实项目中的使用。本章节的内容属于 Canvas 的核心知识点，只有理解了 Canvas 中像素的本质，才能在项目中实现很多炫酷的效果。在本系列文章的后面章节也会通过像素操作的示例来实现图片的各种高级特效。

1.Canvas 的 ImageData

1.1 Canvas 中的 ImageData 详解

ImageData 即图像数据，是从 Canvas 中提取的像素信息，可通过如下方式完成:

ctx.getImageData(x, y, width, height);
// 注意第二第三个参数分别为宽度和该高度

这个 ImageData 对象包括：width,height,以