OffscreenCanvasRenderingContext2D

Baseline 廣泛可用 *

此功能已成熟，並可在許多裝置和瀏覽器版本上執行。自 2023 年 3 月以來，它已在各種瀏覽器中可用。

* 此特性的某些部分可能存在不同級別的支援。

注意：此功能在 Web Workers 中可用。

OffscreenCanvasRenderingContext2D 介面是一個 CanvasRenderingContext2D 渲染上下文，用於在 OffscreenCanvas 物件的點陣圖上進行繪製。它與 CanvasRenderingContext2D 物件類似，但存在以下差異：

不支援使用者介面功能（drawFocusIfNeeded）
其 canvas 屬性指向一個 OffscreenCanvas 物件，而非 <canvas> 元素
屬於 OffscreenCanvas 物件的佔位符 <canvas> 元素的點陣圖在擁有 OffscreenCanvas 的 Window 或 Worker 的渲染更新期間進行更新

示例

以下程式碼片段使用 Worker() 建構函式建立一個 Worker 物件。transferControlToOffscreen() 方法用於從 <canvas> 元素獲取 OffscreenCanvas 物件，以便將其傳輸給 worker。

const canvas = document.getElementById("canvas");
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker("worker.js");
worker.postMessage({ canvas: offscreen }, [offscreen]);

在 worker 執行緒中，我們可以使用 OffscreenCanvasRenderingContext2D 在 OffscreenCanvas 物件的點陣圖上進行繪製。

onmessage = (event) => {
  const canvas = event.data.canvas;
  const offCtx = canvas.getContext("2d");
  // draw to the offscreen canvas context
  offCtx.fillStyle = "red";
  offCtx.fillRect(0, 0, 100, 100);
};

有關完整示例，請參閱我們的 OffscreenCanvas worker 示例（執行 OffscreenCanvas worker）。

附加方法

以下方法是 OffscreenCanvasRenderingContext2D 介面的新增方法，在 CanvasRenderingContext2D 介面中不存在。

commit() 已廢棄非標準: 將渲染的影像推送到上下文的 OffscreenCanvas 物件的佔位符 <canvas> 元素。

不支援的功能

以下使用者介面方法在 OffscreenCanvasRenderingContext2D 介面中不受支援。

CanvasRenderingContext2D.drawFocusIfNeeded(): 如果給定元素獲得焦點，此方法會在當前路徑周圍繪製一個焦點環。

繼承的屬性和方法

以下屬性和方法繼承自 CanvasRenderingContext2D。它們與 CanvasRenderingContext2D 中的用法相同。

上下文

CanvasRenderingContext2D.getContextAttributes() 實驗性: 返回一個包含實際上下文屬性的物件。可以使用 OffscreenCanvas.getContext() 請求上下文屬性。
CanvasRenderingContext2D.isContextLost(): 如果渲染上下文丟失，則返回 true。

繪製矩形

CanvasRenderingContext2D.clearRect(): 將由起始點 *(x, y)* 和尺寸 *(width, height)* 定義的矩形中的所有畫素設定為透明黑色，擦除任何先前繪製的內容。
CanvasRenderingContext2D.fillRect(): 在 *(x, y)* 位置繪製一個填充矩形，其大小由 *width* 和 *height* 確定。
CanvasRenderingContext2D.strokeRect(): 使用當前描邊樣式在畫布上繪製一個矩形，該矩形起始點為 *(x, y)*，寬度為 *w*，高度為 *h*。

繪製文字

以下方法和屬性控制文字繪製。有關文字屬性，另請參閱 TextMetrics 物件。

CanvasRenderingContext2D.fillText(): 在給定的 (x, y) 位置繪製（填充）給定的文字。
CanvasRenderingContext2D.strokeText(): 在給定的 (x, y) 位置繪製（描邊）給定的文字。
CanvasRenderingContext2D.measureText(): 返回一個 TextMetrics 物件。
CanvasRenderingContext2D.textRendering: 文字渲染。可能的值：auto（預設）、optimizeSpeed、optimizeLegibility、

線條樣式

以下方法和屬性控制線條的繪製方式。

CanvasRenderingContext2D.lineWidth: 線條寬度。預設值 1.0。
CanvasRenderingContext2D.lineCap: 線條末端的樣式。可能的值：butt（預設）、round、square。
CanvasRenderingContext2D.lineJoin: 定義兩條線相交處的角點型別。可能的值：round、bevel、miter（預設）。
CanvasRenderingContext2D.miterLimit: 斜接限制比。預設值 10。
CanvasRenderingContext2D.getLineDash(): 返回當前線條虛線圖案陣列，其中包含偶數個非負數。
CanvasRenderingContext2D.setLineDash(): 設定當前線條虛線圖案。
CanvasRenderingContext2D.lineDashOffset: 指定虛線陣列在一條線上開始的位置。

文字樣式

以下屬性控制文字的佈局方式。

CanvasRenderingContext2D.font: 字型設定。預設值 10px sans-serif。
CanvasRenderingContext2D.textAlign: 文字對齊設定。可能的值：start（預設）、end、left、right、center。
CanvasRenderingContext2D.textBaseline: 基線對齊設定。可能的值：top、hanging、middle、alphabetic（預設）、ideographic、bottom。
CanvasRenderingContext2D.direction: 方向性。可能的值：ltr、rtl、inherit（預設）。
CanvasRenderingContext2D.letterSpacing: 字母間距。預設值：0px。
CanvasRenderingContext2D.fontKerning: 字型字偶距。可能的值：auto（預設）、normal、none。
CanvasRenderingContext2D.fontStretch: 字型拉伸。可能的值：ultra-condensed、extra-condensed、condensed、semi-condensed、normal（預設）、semi-expanded、expanded、extra-expanded、ultra-expanded。
CanvasRenderingContext2D.fontVariantCaps: 字型變體大寫。可能的值：normal（預設）、small-caps、all-small-caps、petite-caps、all-petite-caps、unicase、titling-caps。
CanvasRenderingContext2D.textRendering 實驗性: 文字渲染。可能的值：auto（預設）、optimizeSpeed、optimizeLegibility、geometricPrecision。
CanvasRenderingContext2D.wordSpacing: 單詞間距。預設值：0px
CanvasRenderingContext2D.lang 實驗性: 獲取或設定畫布繪圖上下文的語言。

填充和描邊樣式

填充樣式用於形狀內部的顏色和樣式，描邊樣式用於形狀周圍的線條。

CanvasRenderingContext2D.fillStyle: 用於形狀內部的顏色或樣式。預設為 black。
CanvasRenderingContext2D.strokeStyle: 用於形狀周圍線條的顏色或樣式。預設為 black。

漸變和圖案

CanvasRenderingContext2D.createConicGradient(): 圍繞由引數表示的座標點建立一個錐形漸變。
CanvasRenderingContext2D.createLinearGradient(): 沿由引數表示的座標線建立一個線性漸變。
CanvasRenderingContext2D.createRadialGradient(): 根據引數表示的兩個圓的座標建立一個徑向漸變。
CanvasRenderingContext2D.createPattern(): 使用指定的影像建立圖案。它按照重複引數指定的方向重複源。此方法返回一個 CanvasPattern。

陰影

CanvasRenderingContext2D.shadowBlur: 指定模糊效果。預設值：0。
CanvasRenderingContext2D.shadowColor: 陰影顏色。預設值：完全透明的黑色。
CanvasRenderingContext2D.shadowOffsetX: 陰影的水平偏移距離。預設值：0。
CanvasRenderingContext2D.shadowOffsetY: 陰影的垂直偏移距離。預設值：0。

路徑

以下方法可用於操作物件的路徑。

CanvasRenderingContext2D.beginPath(): 透過清空子路徑列表來開始一個新路徑。當您想要建立新路徑時呼叫此方法。
CanvasRenderingContext2D.closePath(): 使畫筆點移回到當前子路徑的起點。它嘗試從當前點到起點繪製一條直線。如果形狀已關閉或只有一個點，此函式不執行任何操作。
CanvasRenderingContext2D.moveTo(): 將新子路徑的起始點移動到 (x, y) 座標。
CanvasRenderingContext2D.lineTo(): 用一條直線將當前子路徑中的最後一個點連線到指定的 (x, y) 座標。
CanvasRenderingContext2D.bezierCurveTo(): 向當前路徑新增一條三次貝塞爾曲線。
CanvasRenderingContext2D.quadraticCurveTo(): 向當前路徑新增一條二次貝塞爾曲線。
CanvasRenderingContext2D.arc(): 向當前路徑新增一個圓弧。
CanvasRenderingContext2D.arcTo(): 根據給定的控制點和半徑向當前路徑新增一個圓弧，並用一條直線連線到前一個點。
CanvasRenderingContext2D.ellipse(): 向當前路徑新增一個橢圓弧。
CanvasRenderingContext2D.rect(): 在 (x, y) 位置建立一個矩形路徑，其大小由 width 和 height 確定。
CanvasRenderingContext2D.roundRect(): 在位置 (x, y) 建立一個圓角矩形路徑，其大小由 *width* 和 *height* 確定，半徑由 *radii* 確定。

繪製路徑

CanvasRenderingContext2D.fill(): 使用當前填充樣式填充當前子路徑。
CanvasRenderingContext2D.stroke(): 使用當前描邊樣式描繪當前子路徑。
CanvasRenderingContext2D.clip(): 從當前子路徑建立一個剪下路徑。在呼叫 clip() 之後繪製的所有內容都只出現在剪下路徑內部。有關示例，請參閱 Canvas 教程中的剪下路徑。
CanvasRenderingContext2D.isPointInPath(): 報告指定的點是否包含在當前路徑中。
CanvasRenderingContext2D.isPointInStroke(): 報告指定的點是否在路徑描邊所包含的區域內。

轉換

CanvasRenderingContext2D 渲染上下文中的物件具有一個當前變換矩陣和操作它的方法。變換矩陣在建立當前預設路徑、繪製文字、形狀和 Path2D 物件時應用。由於現在 API 的大多數部分都使用 DOMMatrix 物件，並且將來也會使用，因此以下列出的方法僅保留用於歷史和相容性原因。

CanvasRenderingContext2D.getTransform(): 檢索當前應用於上下文的變換矩陣。
CanvasRenderingContext2D.rotate(): 向變換矩陣新增旋轉。角度引數表示順時針旋轉角度，以弧度表示。
CanvasRenderingContext2D.scale(): 透過 x 水平方向和 y 垂直方向對 canvas 單位新增縮放變換。
CanvasRenderingContext2D.translate(): 透過將 canvas 及其原點在網格上水平移動 x 和垂直移動 y 來新增平移變換。
CanvasRenderingContext2D.transform(): 將當前變換矩陣與其引數描述的矩陣相乘。
CanvasRenderingContext2D.setTransform(): 將當前變換重置為單位矩陣，然後使用相同的引數呼叫 transform() 方法。
CanvasRenderingContext2D.resetTransform(): 透過單位矩陣重置當前變換。

合成

CanvasRenderingContext2D.globalAlpha: 在將形狀和影像合成到畫布之前應用於它們的 Alpha 值。預設值 1.0（不透明）。
CanvasRenderingContext2D.globalCompositeOperation: 應用 globalAlpha 後，這會設定如何將形狀和影像繪製到現有點陣圖上。

繪製圖像

CanvasRenderingContext2D.drawImage(): 繪製指定的影像。此方法有多種格式可用，在使用上提供了極大的靈活性。

畫素操作

另請參閱 ImageData 物件。

CanvasRenderingContext2D.createImageData(): 建立一個具有指定尺寸的新的空白 ImageData 物件。新物件中的所有畫素都是透明黑色。
CanvasRenderingContext2D.getImageData(): 返回一個 ImageData 物件，表示畫布區域的底層畫素資料，該區域由從 *(sx, sy)* 開始、寬度為 *sw*、高度為 *sh* 的矩形表示。
CanvasRenderingContext2D.putImageData(): 將給定 ImageData 物件中的資料繪製到點陣圖上。如果提供了髒矩形，則只繪製該矩形中的畫素。

影像平滑

CanvasRenderingContext2D.imageSmoothingEnabled: 影像平滑模式；如果停用，影像在縮放時將不會進行平滑處理。
CanvasRenderingContext2D.imageSmoothingQuality: 允許你設定影像平滑的質量。

畫布狀態

CanvasRenderingContext2D 渲染上下文包含各種繪圖樣式狀態（線條樣式、填充樣式、陰影樣式、文字樣式的屬性）。以下方法可幫助您處理這些狀態。

CanvasRenderingContext2D.save(): 使用堆疊儲存當前繪圖樣式狀態，以便你可以使用 restore() 恢復對其所做的任何更改。
CanvasRenderingContext2D.restore(): 將繪圖樣式狀態恢復到由 save() 儲存的“狀態堆疊”上的最後一個元素。
CanvasRenderingContext2D.canvas: 對 OffscreenCanvas 物件的只讀引用。
CanvasRenderingContext2D.getContextAttributes() 實驗性: 返回一個包含實際上下文屬性的物件。可以使用 HTMLCanvasElement.getContext() 請求上下文屬性。
CanvasRenderingContext2D.reset(): 將當前繪圖樣式狀態重置為預設值。

過濾器

CanvasRenderingContext2D.filter: 將 CSS 或 SVG 過濾器應用於畫布；例如，改變其亮度或模糊度。

不支援的屬性和方法

以下方法在 OffscreenCanvasRenderingContext2D 介面中不受支援。

CanvasRenderingContext2D.drawFocusIfNeeded(): 如果給定元素獲得焦點，此方法會在當前路徑周圍繪製一個焦點環。

規範

規範
HTML # the-offscreen-2d-rendering-context

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後由 MDN 貢獻者於 2025 年 8 月 12 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題