HTML 画布 - 图片

图片非常重要，是生成具有吸引力的视觉内容的首要需求。Canvas API 具有各种图像处理功能，可以作为输入图像，也可以根据需要进行操作。

CanvasRenderingContext2D 和 ImageData 接口包含所有用于在 Canvas 元素上使用图像创建吸引人的图形的方法和属性。

以下是 HTML5 中处理图像的各种属性：

序号	属性和描述
1	data 此 data 属性返回 ImageData 对象的像素数据。
2	imageSmoothingEnabled Canvas API 的此属性决定是否平滑可用缩放图像。如果图像已缩放，则返回 true；如果未缩放，则返回 false。
3	imageSmoothingQuality Canvas API 的此属性允许我们设置在 Canvas 上绘制的图像的图像平滑质量。

下表列出了在 Canvas 元素内基于图像创建图形的方法。

序号	方法和描述
1	createImageData() 此方法可用于使用给定尺寸创建一个新的 ImageData 对象。除非更改，否则形成的对象将填充黑色像素。
2	drawImage() 此方法将图像绘制到 Canvas 元素上。
3	getImageData() getImageData() 方法捕获传递作为参数的给定坐标的图像帧。捕获的图像将打印在给定点的画布元素上。
4	ImageData() 此构造函数方法返回使用作为参数传递的数据新创建的 Image 数据对象。
5	putImageData() 此方法使用ImageData 对象提供的数据在 Canvas 元素上绘制。我们可以使用getImageData() 方法检索此数据。

打印页面