PaintRenderingContext2D

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

PaintRenderingContext2D 接口是 CSS Painting API 的一部分，是该 API 用于在位图上进行绘制的渲染上下文。它实现了 CanvasRenderingContext2D API 的一个子集，但存在以下例外：

它不实现 CanvasImageData 像素操作、CanvasUserInterface 焦点、CanvasText 文本绘制或 CanvasTextDrawingStyles 文本样式接口方法。
输出位图的大小与正在为其进行渲染的对象的大小相同。
当 currentColor 用作颜色时，它将被视为不透明的黑色。

此接口仅在 PaintWorkletGlobalScope 中可用。

实例属性和方法

PaintRenderingContext2D 实现 CanvasRenderingContext2D API 的一个子集，所有属性和方法的使用方式与 CanvasRenderingContext2D 中的用法相同。

CanvasRenderingContext2D.save(): 使用堆栈保存当前绘图样式状态，以便你可以使用 restore() 恢复对其所做的任何更改。
CanvasRenderingContext2D.restore(): 将绘图样式状态恢复到由 save() 保存的“状态堆栈”上的最后一个元素。
CanvasRenderingContext2D.reset(): 将当前绘制样式状态重置为默认值。

CanvasRenderingContext2D.getTransform(): 检索当前应用于上下文的变换矩阵，并将其作为 DOMMatrix 返回。
CanvasRenderingContext2D.rotate(): 向变换矩阵添加旋转。角度参数表示顺时针旋转角度，以弧度表示。
CanvasRenderingContext2D.scale(): 通过 x 水平方向和 y 垂直方向对 canvas 单位添加缩放变换。
CanvasRenderingContext2D.translate(): 通过将 canvas 及其原点在网格上水平移动 x 和垂直移动 y 来添加平移变换。
CanvasRenderingContext2D.transform(): 将当前变换矩阵与其参数描述的矩阵相乘。
CanvasRenderingContext2D.setTransform(): 将当前变换重置为单位矩阵，然后使用相同的参数调用 transform() 方法。
CanvasRenderingContext2D.resetTransform(): 通过单位矩阵重置当前变换。

CanvasRenderingContext2D.globalAlpha: 在组合到画布之前应用于形状和图像的透明度值。
CanvasRenderingContext2D.globalCompositeOperation: 在应用 globalAlpha 的情况下，此设置决定了形状和图像如何绘制到现有位图上。

CanvasRenderingContext2D.imageSmoothingEnabled: 图像平滑模式；如果禁用，图像在缩放时将不会进行平滑处理。
CanvasRenderingContext2D.imageSmoothingQuality: 允许你设置图像平滑的质量。

CanvasRenderingContext2D.createConicGradient(): 围绕由参数表示的坐标点创建一个锥形渐变。
CanvasRenderingContext2D.createLinearGradient(): 沿由参数表示的坐标线创建一个线性渐变。
CanvasRenderingContext2D.createRadialGradient(): 根据参数表示的两个圆的坐标创建一个径向渐变。
CanvasRenderingContext2D.createPattern(): 使用指定图像创建 CanvasPattern 图案，该图案根据 repetition 参数指定的方向重复。

CanvasRenderingContext2D.beginPath(): 开始一个新的路径，清空子路径列表。当您想要创建一个新路径时，调用此方法。
CanvasRenderingContext2D.fill(): 使用当前的填充样式填充当前路径的子路径。
CanvasRenderingContext2D.stroke(): 使用当前的描边样式描绘当前路径的子路径。
CanvasRenderingContext2D.clip(): 将当前或指定的路径转换为当前的剪裁区域，并使用指定的填充规则来确定哪些点在路径内。后续的路径修改将仅显示在剪裁路径内。
CanvasRenderingContext2D.isPointInPath(): 一个布尔值，如果指定点包含在当前或指定的路径中，则其值为 true。
CanvasRenderingContext2D.isPointInStroke(): 一个布尔值，如果该点在描绘路径所包含的区域内，则其值为 true。

CanvasRenderingContext2D.lineWidth: 一个数字，指定线宽，以坐标空间单位表示。
CanvasRenderingContext2D.lineCap: 线条末端的样式。可能的值：butt（默认）、round、square。
CanvasRenderingContext2D.lineJoin: 定义两条线相交处的角点类型。可能的值：round、bevel、miter（默认）。
CanvasRenderingContext2D.miterLimit: 一个数字，指定斜接限制比率，以坐标空间单位表示。
CanvasRenderingContext2D.getLineDash(): 以数字 Array 的形式返回当前线段图案，该数组指定坐标空间单位的线段和间隙的长度。
CanvasRenderingContext2D.setLineDash(): 将线段和间隙距离列表设置为当前线段图案（在描边时使用）。
CanvasRenderingContext2D.lineDashOffset: 指定虚线数组在一条线上开始的位置。

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 确定。

请参阅 CSS Painting API 的完整示例。

规范
CSS Painting API Level 1 # 2d-rendering-context

此页面最后修改于 2025年2月6日，由 MDN 贡献者修改。