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() 方法檢索此資料。

列印頁面