OffscreenCanvasRenderingContext2D

基线 2023

新可用

2023 年 3 月起,此功能在最新的设备和浏览器版本中有效。此功能可能无法在较旧的设备或浏览器中运行。

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

OffscreenCanvasRenderingContext2D 接口是用于绘制到 OffscreenCanvas 对象位图的 CanvasRenderingContext2D 渲染上下文。它类似于 CanvasRenderingContext2D 对象,但有以下区别

  • 不支持用户界面功能 (drawFocusIfNeeded)
  • canvas 属性引用的是 OffscreenCanvas 对象,而不是 <canvas> 元素
  • 在拥有 OffscreenCanvasWindowWorker 的渲染更新期间,OffscreenCanvas 对象的占位符 <canvas> 元素的位图会进行更新

示例

以下代码片段使用 Worker() 构造函数创建 Worker 对象。transferControlToOffscreen() 方法用于从 <canvas> 元素获取 OffscreenCanvas 对象,以便可以将其传输到工作线程

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

在工作线程中,我们可以使用 OffscreenCanvasRenderingContext2D 绘制到 OffscreenCanvas 对象的位图

js
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 工作线程示例 (运行 OffscreenCanvas 工作线程)。

其他方法

以下方法是 OffscreenCanvasRenderingContext2D 接口的新方法,在 CanvasRenderingContext2D 接口中不存在

commit() 已弃用 非标准

将渲染的图像推送到上下文的 OffscreenCanvas 对象的占位符 <canvas> 元素。

不支持的功能

以下用户界面方法不受 OffscreenCanvasRenderingContext2D 接口支持

CanvasRenderingContext2D.drawFocusIfNeeded()

如果给定的元素处于焦点状态,此方法将在当前路径周围绘制一个焦点环。

继承的属性和方法

以下属性和方法继承自 CanvasRenderingContext2D。它们在 CanvasRenderingContext2D 中的使用方式相同

上下文

CanvasRenderingContext2D.isContextLost()

如果渲染上下文已丢失,则返回 true

绘制矩形

CanvasRenderingContext2D.clearRect()

将由起点 (x, y) 和大小 (width, height) 定义的矩形中的所有像素设置为透明黑色,从而擦除之前绘制的任何内容。

CanvasRenderingContext2D.fillRect()

(x, y) 位置绘制一个填充的矩形,其大小由 widthheight 确定。

CanvasRenderingContext2D.strokeRect()

使用当前描边样式在画布上绘制一个矩形,该矩形的起点位于 (x, y) 处,宽度为 w,高度为 h

绘制文本

以下方法和属性控制绘制文本。另请参阅 TextMetrics 对象,了解文本属性。

CanvasRenderingContext2D.fillText()

在给定的 (x, y) 位置绘制(填充)给定的文本。

CanvasRenderingContext2D.strokeText()

在给定的 (x, y) 位置绘制(描边)给定的文本。

CanvasRenderingContext2D.measureText()

返回一个 TextMetrics 对象。

CanvasRenderingContext2D.textRendering

文本渲染。可能的值:auto(默认)、optimizeSpeedoptimizeLegibility

线条样式

以下方法和属性控制线条的绘制方式。

CanvasRenderingContext2D.lineWidth

线条宽度。默认值为 1.0

CanvasRenderingContext2D.lineCap

线条末端的类型。可能的值:butt(默认)、roundsquare

CanvasRenderingContext2D.lineJoin

定义两条线相交处的拐角类型。可能的值:roundbevelmiter(默认)。

CanvasRenderingContext2D.miterLimit

斜接限制比率。默认值为 10

CanvasRenderingContext2D.getLineDash()

返回当前的线段模式数组,其中包含偶数个非负数。

CanvasRenderingContext2D.setLineDash()

设置当前的线段模式。

CanvasRenderingContext2D.lineDashOffset

指定在直线上开始线段数组的位置。

文本样式

以下属性控制文本的布局方式。

CanvasRenderingContext2D.font

字体设置。默认值为 10px sans-serif

CanvasRenderingContext2D.textAlign

文本对齐设置。可能的值:start(默认)、endleftrightcenter

CanvasRenderingContext2D.textBaseline

基线对齐设置。可能的值:tophangingmiddlealphabetic(默认)、ideographicbottom

CanvasRenderingContext2D.direction

方向性。可能的值:ltrrtlinherit(默认)。

CanvasRenderingContext2D.letterSpacing

字母间距。默认值为:0px

CanvasRenderingContext2D.fontKerning

字体字距调整。可能的值:auto(默认)、normalnone

CanvasRenderingContext2D.fontStretch

字体拉伸。可能的值:ultra-condensedextra-condensedcondensedsemi-condensednormal(默认)、semi-expandedexpandedextra-expandedultra-expanded

CanvasRenderingContext2D.fontVariantCaps

字体变体大写。可能的值:normal(默认)、small-capsall-small-capspetite-capsall-petite-capsunicasetitling-caps

CanvasRenderingContext2D.textRendering 实验性

文本渲染。可能的值:auto(默认)、optimizeSpeedoptimizeLegibilitygeometricPrecision

CanvasRenderingContext2D.wordSpacing

字间距。默认值为:0px

填充和描边样式

填充样式用于形状内部的颜色和样式,描边样式用于形状周围的线条。

CanvasRenderingContext2D.fillStyle

形状内部使用的颜色或样式。默认值为 #000(黑色)。

CanvasRenderingContext2D.strokeStyle

形状周围线条使用的颜色或样式。默认值为 #000(黑色)。

渐变和图案

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) 创建一个矩形的路径,其大小由宽度高度决定。

CanvasRenderingContext2D.roundRect()

在位置 (x, y) 创建一个具有圆角的矩形路径,其大小由宽度高度决定,圆角半径由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 向画布单位添加缩放变换。

CanvasRenderingContext2D.translate()

通过水平方向上移动 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

浏览器兼容性

BCD 表格只有在浏览器中启用 JavaScript 时才会加载。

另请参阅