HTMLCanvasElement

例項屬性

繼承自其父級 HTMLElement 的屬性。

HTMLCanvasElement.height

<canvas> 元素的 height HTML 屬性是一個非負整數，表示畫布一行畫素（或 RGBA 值）的數量。當該屬性未指定，或設定為無效值（例如負數）時，將使用預設值 150。如果未為 <canvas> 分配 [單獨的] CSS height，則此值還將用作畫布在 CSS 畫素長度單位中的高度。

HTMLCanvasElement.width

<canvas> 元素的 width HTML 屬性是一個非負整數，表示畫布一列畫素（或 RGBA 值）的數量。當該屬性未指定，或設定為無效值（例如負數）時，將使用預設值 300。如果未為 <canvas> 分配 [單獨的] CSS width，則此值還將用作畫布在 CSS 畫素長度單位中的寬度。

HTMLCanvasElement.mozOpaque 非標準 已棄用

一個布林值，反映 <canvas> 元素的 moz-opaque HTML 屬性。它讓畫布知道透明度是否是影響因素。如果畫布知道沒有透明度，則可以最佳化繪製效能。這僅在基於 Mozilla 的瀏覽器中受支援；請改用標準化的 canvas.getContext('2d', { alpha: false })。

HTMLCanvasElement.mozPrintCallback 非標準

一個 function，最初為 null。Web 內容可以將其設定為一個 JavaScript 函式，當列印頁面時需要重繪畫布時，該函式將被呼叫。呼叫時，回撥函式會收到一個實現 MozCanvasPrintState 介面的“printState”物件。回撥函式可以從 printState 物件獲取要繪製的上下文，並在完成後必須在其上呼叫 done()。mozPrintCallback 的目的是以使用中的印表機的解析度獲得更高解析度的畫布渲染。 請參閱此博文。

例項方法

繼承自其父級 HTMLElement 的方法。

HTMLCanvasElement.captureStream()

返回一個 CanvasCaptureMediaStreamTrack，它是畫布表面的即時影片捕獲。

HTMLCanvasElement.getContext()

返回畫布上的繪圖上下文，如果上下文識別符號不受支援，或者畫布已被設定為不同的上下文模式，則返回 null。

HTMLCanvasElement.toDataURL()

返回一個 data-URL，其中包含指定格式（預設為 png）的影像表示。返回的影像解析度為 96dpi。

HTMLCanvasElement.toBlob()

建立一個 Blob 物件，表示畫布中的影像；此檔案可以由使用者代理自行決定快取在磁碟上或儲存在記憶體中。

HTMLCanvasElement.transferControlToOffscreen()

將控制轉移到 OffscreenCanvas 物件，該物件可以在主執行緒或工作執行緒上。

事件

繼承其父級 HTMLElement 的事件。

使用 addEventListener() 監聽這些事件，或透過將事件監聽器分配給此介面的 oneventname 屬性。

contextlost

如果瀏覽器檢測到 CanvasRenderingContext2D 上下文已丟失，則觸發。

contextrestored

如果瀏覽器成功恢復了 CanvasRenderingContext2D 上下文，則觸發。

webglcontextcreationerror

如果使用者代理無法建立 WebGLRenderingContext 或 WebGL2RenderingContext 上下文，則觸發。

webglcontextlost

如果使用者代理檢測到與 WebGLRenderingContext 或 WebGL2RenderingContext 物件關聯的繪圖緩衝區已丟失，則觸發。

webglcontextrestored

如果使用者代理恢復了 WebGLRenderingContext 或 WebGL2RenderingContext 物件的繪圖緩衝區，則觸發。

規範

瀏覽器相容性

另見

• 實現此介面的 HTML 元素： <canvas>