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 上查看此页面 • 报告此内容的问题