OffscreenCanvasRenderingContext2D
注意:此功能在 Web Workers 中可用。
OffscreenCanvasRenderingContext2D
接口是用于绘制到 OffscreenCanvas
对象位图的 CanvasRenderingContext2D
渲染上下文。它类似于 CanvasRenderingContext2D
对象,但有以下区别
示例
以下代码片段使用 Worker()
构造函数创建 Worker
对象。transferControlToOffscreen()
方法用于从 <canvas>
元素获取 OffscreenCanvas
对象,以便可以将其传输到工作线程
const canvas = document.getElementById("canvas");
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker("worker.js");
worker.postMessage({ canvas: offscreen }, [offscreen]);
在工作线程中,我们可以使用 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 工作线程示例 (运行 OffscreenCanvas 工作线程)。
其他方法
不支持的功能
以下用户界面方法不受 OffscreenCanvasRenderingContext2D
接口支持
CanvasRenderingContext2D.drawFocusIfNeeded()
-
如果给定的元素处于焦点状态,此方法将在当前路径周围绘制一个焦点环。
继承的属性和方法
以下属性和方法继承自 CanvasRenderingContext2D
。它们在 CanvasRenderingContext2D
中的使用方式相同
上下文
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.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 时才会加载。