CanvasRenderingContext2D

基线广泛可用

此功能已得到很好的确立，并且可以在许多设备和浏览器版本上运行。它自以下时间起在浏览器中可用： 2015 年 7 月.

CanvasRenderingContext2D 接口是 Canvas API 的一部分，它为 <canvas> 元素的绘图表面提供 2D 渲染上下文。它用于绘制形状、文本、图像和其他对象。

此接口的属性和方法在本文档的参考部分进行了描述。此外，Canvas 教程提供了更多解释、示例和资源。

对于 OffscreenCanvas，有一个等效的接口提供渲染上下文。离屏渲染上下文继承了与 CanvasRenderingContext2D 大多数相同的属性和方法，并在 OffscreenCanvasRenderingContext2D 参考页面中进行了更详细的描述。

基本示例

要获取 CanvasRenderingContext2D 实例，您必须首先拥有一个 HTML <canvas> 元素来使用

html

<canvas id="my-house" width="300" height="300"></canvas>

要获取画布的 2D 渲染上下文，请在 <canvas> 元素上调用 getContext()，并提供 '2d' 作为参数

const canvas = document.getElementById("my-house");
const ctx = canvas.getContext("2d");

有了上下文，您就可以绘制任何您想要的图形。此代码绘制了一栋房子

// Set line width
ctx.lineWidth = 10;

// Wall
ctx.strokeRect(75, 140, 150, 110);

// Door
ctx.fillRect(130, 190, 40, 60);

// Roof
ctx.beginPath();
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();

生成的图形如下所示

参考

上下文

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.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(): 使用指定的图像创建图案。它在重复参数指定的方

阴影

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(): 创建具有指定位置、宽度、高度和圆角半径的圆角矩形的路径。

绘制路径

CanvasRenderingContext2D.fill(): 使用当前填充样式填充当前子路径。
CanvasRenderingContext2D.stroke(): 使用当前描边样式描绘当前子路径。
CanvasRenderingContext2D.drawFocusIfNeeded(): 如果给定元素获得焦点，此方法会在当前路径周围绘制一个焦点环。
CanvasRenderingContext2D.clip(): 从当前子路径创建剪裁路径。在调用clip()之后绘制的所有内容只会出现在剪裁路径内。有关示例，请参阅 Canvas 教程中的剪裁路径。
CanvasRenderingContext2D.isPointInPath(): 报告指定点是否包含在当前路径中。
CanvasRenderingContext2D.isPointInStroke(): 报告指定点是否在路径描边包含的区域内。

变换

CanvasRenderingContext2D渲染上下文中的对象具有当前变换矩阵和用于操作它的方法。在创建当前默认路径、绘制文本、形状和Path2D对象时应用变换矩阵。以下列出的方法出于历史和兼容性原因而保留，因为现在 API 的大多数部分都使用DOMMatrix对象，并且将来将使用它们代替。

CanvasRenderingContext2D.getTransform(): 检索应用于上下文的当前变换矩阵。
CanvasRenderingContext2D.rotate(): 向变换矩阵添加旋转。angle 参数表示顺时针旋转角度，以弧度表示。
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: 对HTMLCanvasElement的只读反向引用。如果它没有与<canvas>元素关联，则可能为null。
CanvasRenderingContext2D.getContextAttributes(): 返回一个对象，其中包含浏览器使用的上下文属性。在使用HTMLCanvasElement.getContext()创建 2D 上下文时，可以请求上下文属性。
CanvasRenderingContext2D.reset(): 重置渲染上下文，包括后备缓冲区、绘图状态堆栈、路径和样式。
CanvasRenderingContext2D.isContextLost() 实验性: 如果渲染上下文已丢失，则返回 true。

过滤器

CanvasRenderingContext2D.filter: 将 CSS 或 SVG 过滤器应用于画布，例如，更改其亮度或模糊度。

规范

规范
HTML 标准 # 2dcontext

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。