HTML
动态标准 — 最后更新于 2024 年 9 月 12 日
动态标准 — 最后更新于 2024 年 9 月 12 日
canvas 元素Path2D 对象ImageBitmap 渲染上下文OffscreenCanvas 接口canvas 元素的安全性canvas 元素在所有当前引擎中都受支持。
在所有当前引擎中都受支持。
a 元素、具有 usemap 属性的 img 元素、button 元素、input 元素（其 type 属性处于 复选框 或 单选按钮 状态）、input 元素（是 按钮）和具有 multiple 属性或 显示大小 大于 1 的 select 元素。width — 水平尺寸height — 垂直尺寸typedef (CanvasRenderingContext2D or ImageBitmapRenderingContext or WebGLRenderingContext or WebGL2RenderingContext or GPUCanvasContext ) RenderingContext ;
[Exposed =Window ]
interface HTMLCanvasElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute unsigned long width ;
[CEReactions ] attribute unsigned long height ;
RenderingContext ? getContext (DOMString contextId , optional any options = null );
USVString toDataURL (optional DOMString type = "image/png", optional any quality );
undefined toBlob (BlobCallback _callback , optional DOMString type = "image/png", optional any quality );
OffscreenCanvas transferControlToOffscreen ();
};
callback BlobCallback = undefined (Blob ? blob );canvas 元素为脚本提供了一个与分辨率相关的位图画布，可用于动态呈现图形、游戏图形、艺术品或其他视觉图像。
作者不应在文档中使用 canvas 元素，如果存在更合适的元素。例如，使用 canvas 元素来呈现页面标题是不合适的：如果标题的预期呈现方式是图形密集型，则应使用适当的元素（通常是 h1）进行标记，然后使用 CSS 和支持技术（例如 阴影树）进行样式设置。
当作者使用 canvas 元素时，他们还必须提供内容，当内容呈现给用户时，传达的函数或目的与 canvas 的位图本质上相同。此内容可以作为 canvas 元素的内容放置。canvas 元素的内容（如果有）是元素的 备用内容。
在交互式视觉媒体中，如果为 canvas 元素 启用了脚本，并且如果已启用对 canvas 元素的支持，则 canvas 元素 表示 由动态创建的图像（元素的位图）组成的 嵌入式内容。
在非交互式、静态、视觉媒体中，如果 canvas 元素以前已与渲染上下文相关联（例如，如果页面在交互式视觉媒体中查看，现在正在打印，或者如果在页面布局过程中运行的一些脚本在元素上绘制），则 canvas 元素 表示 具有元素的当前位图和大小的 嵌入式内容。否则，元素将表示其 备用内容。
在非视觉媒体中，以及在视觉媒体中，如果为 canvas 元素 禁用了脚本，或者如果禁用了对 canvas 元素的支持，则 canvas 元素 表示 其 备用内容。
当 canvas 元素 表示 嵌入式内容 时，用户仍然可以聚焦 canvas 元素的后代（在 备用内容 中）。当元素 聚焦 时，它是键盘交互事件的目标（即使元素本身不可见）。这允许作者使交互式画布可键盘访问：作者应该在 备用内容 中对交互式区域和 可聚焦区域 进行一对一的映射。（焦点对鼠标交互事件没有影响。）。[UIEVENTS]
其最近的 canvas 元素祖先是 正在渲染 并 表示 嵌入式内容 的元素是 用作相关画布备用内容的元素。
canvas 元素有两个属性来控制元素位图的大小：width 和 height。这些属性（如果指定）必须具有 有效的非负整数 值。必须使用 解析非负整数的规则 来 获得其数值。如果属性缺失，或者解析其值时返回错误，则必须使用默认值。width 属性的默认值为 300，height 属性的默认值为 150。
设置 width 或 height 属性的值时，如果 canvas 元素的 上下文模式 设置为 占位符，则用户代理必须抛出一个 "InvalidStateError" DOMException 并且保持属性值的不变。
当 canvas 元素 表示 嵌入式内容 时，canvas 元素的 自然尺寸 等于元素位图的尺寸。
用户代理必须使用一个方形像素密度，其中每个坐标空间单元包含一个像素的图像数据，用于 canvas 及其渲染上下文的位图。
canvas 元素可以由样式表任意调整大小，其位图随后会受到 'object-fit' CSS 属性的影响。
的位图canvas元素，位图ImageBitmap对象，以及一些渲染上下文的位图，例如在下面的CanvasRenderingContext2D和ImageBitmapRenderingContext对象章节中描述的位图，有一个origin-clean标志，它可以设置为true或false。最初，当canvas元素或ImageBitmap对象被创建时，它的位图的origin-clean标志必须设置为true。
一个canvas元素可以有一个与之绑定的渲染上下文。最初，它没有绑定渲染上下文。为了跟踪它是否具有渲染上下文以及它是哪种渲染上下文，canvas也具有一个canvas context mode，它最初为none，但可以由本规范中定义的算法更改为placeholder，2d，bitmaprenderer，webgl，webgl2或webgpu。
当它的canvas context mode为none时，一个canvas元素没有渲染上下文，它的位图必须为透明黑色，具有等于元素的width属性的自然宽度，以及等于元素的height属性的自然高度，这些值以CSS像素解释，并在属性被设置、更改或删除时更新。
当它的canvas context mode为placeholder时，一个canvas元素没有渲染上下文。它充当OffscreenCanvas对象的占位符，并且canvas元素的内容由OffscreenCanvas对象的渲染上下文更新。
当一个canvas元素表示嵌入式内容时，它提供一个绘画来源，其宽度为元素的自然宽度，其高度为元素的自然高度，其外观为元素的位图。
无论何时width和height内容属性被设置、删除、更改或冗余地设置为它们已经具有的值，那么用户代理必须执行以下表格中对应于canvas元素的context mode的行中的操作。
|
操作 | |
|---|---|
|
遵循WebGL规范中定义的行为。 [WEBGL] | |
|
遵循WebGPU中定义的行为。 [WEBGPU] | |
|
如果上下文的bitmap mode设置为blank，则运行步骤以设置 | |
|
不做任何事情。 | |
|
不做任何事情。 |
在所有当前引擎中都受支持。
在所有当前引擎中都受支持。
The width and height IDL attributes must reflect the respective content attributes of the same name, with the same defaults.
context = canvas.getContext(contextId [, options ])在所有当前引擎中都受支持。
返回一个对象，该对象公开用于在画布上绘制的API。 contextId指定所需的API："2d"，"bitmaprenderer"，"webgl"，"webgl2"或"webgpu"。 options由该API处理。
本规范在下面定义了"2d"和"bitmaprenderer"上下文。WebGL规范定义了"webgl"和"webgl2"上下文。 WebGPU定义了"webgpu"上下文。 [WEBGL] [WEBGPU]
如果contextId不受支持，或者画布已经使用另一个上下文类型初始化（例如，在获取"webgl"上下文后尝试获取"2d"上下文），则返回null。
当调用canvas元素的getContext(contextId, options)方法时，它必须运行以下步骤
如果options不是对象，则将options设置为null。
将options设置为将options转换为JavaScript值的结果。
运行以下表格中单元格的步骤，该单元格的列标题与该canvas元素的canvas context mode匹配，并且行标题与contextId匹配
| none | 2d | bitmaprenderer | webgl或webgl2 | webgpu | placeholder | |
|---|---|---|---|---|---|---|
"2d" |
| 返回与上次使用相同第一个参数调用该方法时返回的相同对象。 | 返回null。 | 返回null。 | 返回null。 | 抛出"InvalidStateError" DOMException. |
"bitmaprenderer" |
| 返回null。 | 返回与上次使用相同第一个参数调用该方法时返回的相同对象。 | 返回null。 | 返回null。 | 抛出"InvalidStateError" DOMException. |
"webgl"或"webgl2"，如果用户代理在其当前配置中支持WebGL功能 |
| 返回null。 | 返回null。 | 返回与上次使用相同第一个参数调用该方法时返回的相同对象。 | 返回null。 | 抛出"InvalidStateError" DOMException. |
"webgpu"，如果用户代理在其当前配置中支持WebGPU功能 |
| 返回null。 | 返回null。 | 返回null。 | 返回与上次使用相同第一个参数调用该方法时返回的相同对象。 | 抛出"InvalidStateError" DOMException. |
| 不支持的值* | 返回null。 | 返回null。 | 返回null。 | 返回null。 | 返回null。 | 抛出"InvalidStateError" DOMException. |
url = canvas.toDataURL([ type [, quality ] ])在所有当前引擎中都受支持。
返回画布中图像的 data: URL。
如果提供第一个参数，则它将控制要返回的图像类型（例如，PNG 或 JPEG）。默认值为 "image/png"；如果给定的类型不受支持，也会使用该类型。如果类型是支持可变质量的图像格式（例如 "image/jpeg"），则第二个参数适用，它是在 0.0 到 1.0（含）之间的数字，表示生成图像所需的质量级别。
当尝试使用除 "image/png" 以外的类型时，作者可以通过检查返回的字符串是否以 "data:image/png," 或 "data:image/png;" 中的任何一个精确字符串开头，来检查图像是否确实以请求的格式返回。如果是，则图像为 PNG，因此不支持请求的类型。（唯一的例外是，如果画布没有高度或没有宽度，则结果可能只是 "data:,"。）
canvas.toBlob(callback [, type [, quality ] ])在所有当前引擎中都受支持。
创建一个表示包含画布中图像的文件的 Blob 对象，并使用该对象的句柄调用回调函数。
如果提供第二个参数，则它将控制要返回的图像类型（例如，PNG 或 JPEG）。默认值为 "image/png"；如果给定的类型不受支持，也会使用该类型。如果类型是支持可变质量的图像格式（例如 "image/jpeg"），则第三个参数适用，它是在 0.0 到 1.0（含）之间的数字，表示生成图像所需的质量级别。
canvas.transferControlToOffscreen()HTMLCanvasElement/transferControlToOffscreen
在所有当前引擎中都受支持。
返回一个新创建的 OffscreenCanvas 对象，该对象使用 canvas 元素作为占位符。一旦 canvas 元素成为 OffscreenCanvas 对象的占位符，就不能再更改其自然大小，也不能拥有渲染上下文。占位符画布的内容在 OffscreenCanvas 的 相关代理 的 事件循环 的 更新渲染 步骤中更新。
当调用 toDataURL(type, quality) 方法时，必须运行以下步骤
如果此 canvas 元素的位图的 origin-clean 标志设置为 false，则抛出 "SecurityError" DOMException。
如果此 canvas 元素的位图没有像素（即，其水平维度或垂直维度为零），则返回字符串 "data:,"。（这是最短的 data: URL；它表示 text/plain 资源中的空字符串。）
假设 file 是 此 canvas 元素的位图作为文件的序列化结果，如果给定，则传递 type 和 quality。
如果 file 为 null，则返回 "data:,"。
当调用 toBlob(callback, type, quality) 方法时，必须运行以下步骤
如果此 canvas 元素的位图的 origin-clean 标志设置为 false，则抛出 "SecurityError" DOMException。
假设 result 为 null。
如果此 canvas 元素的位图有像素（即，其水平维度和垂直维度都不为零），则将 result 设置为此 canvas 元素的位图的副本。
以 并行方式 运行以下步骤
如果 result 不为 null，则将 result 设置为 以 result 作为文件的序列化结果，如果给定，则使用 type 和 quality。
在给定此 canvas 元素的 画布 Blob 序列化任务源 上 排队一个元素任务，以运行以下步骤
如果 result 不为 null，则在 此 canvas 元素的相关领域 中创建一个新的 Blob 对象，表示 result。[FILEAPI]
调用 callback，并提供 « result » 和 "report"。
当调用 transferControlToOffscreen() 方法时，必须运行以下步骤
如果此 canvas 元素的 上下文模式 未设置为 none，则抛出 "InvalidStateError" DOMException。
假设 offscreenCanvas 是一个新的 OffscreenCanvas 对象，其宽度和高度等于此 canvas 元素的 width 和 height 内容属性的值。
将 offscreenCanvas 的 占位符 canvas 元素 设置为对此 canvas 元素的弱引用。
将此 canvas 元素的 上下文模式 设置为 placeholder。
返回 offscreenCanvas。
在所有当前引擎中都受支持。
在所有当前引擎中都受支持。
在所有当前引擎中都受支持。
在所有当前引擎中都受支持。
在所有当前引擎中都受支持。
typedef (HTMLImageElement or
SVGImageElement ) HTMLOrSVGImageElement ;
typedef (HTMLOrSVGImageElement or
HTMLVideoElement or
HTMLCanvasElement or
ImageBitmap or
OffscreenCanvas or
VideoFrame ) CanvasImageSource ;
enum PredefinedColorSpace { " srgb " , " display-p3 " };
enum CanvasFillRule { " nonzero " , " evenodd " };
dictionary CanvasRenderingContext2DSettings {
boolean alpha = true ;
boolean desynchronized = false ;
PredefinedColorSpace colorSpace = "srgb";
boolean willReadFrequently = false ;
};
enum ImageSmoothingQuality { " low " , " medium " , " high " };
[Exposed =Window ]
interface CanvasRenderingContext2D {
// back-reference to the canvas
readonly attribute HTMLCanvasElement canvas ;
CanvasRenderingContext2DSettings getContextAttributes ();
};
CanvasRenderingContext2D includes CanvasState ;
CanvasRenderingContext2D includes CanvasTransform ;
CanvasRenderingContext2D includes CanvasCompositing ;
CanvasRenderingContext2D includes CanvasImageSmoothing ;
CanvasRenderingContext2D includes CanvasFillStrokeStyles ;
CanvasRenderingContext2D includes CanvasShadowStyles ;
CanvasRenderingContext2D includes CanvasFilters ;
CanvasRenderingContext2D includes CanvasRect ;
CanvasRenderingContext2D includes CanvasDrawPath ;
CanvasRenderingContext2D includes CanvasUserInterface ;
CanvasRenderingContext2D includes CanvasText ;
CanvasRenderingContext2D includes CanvasDrawImage ;
CanvasRenderingContext2D includes CanvasImageData ;
CanvasRenderingContext2D includes CanvasPathDrawingStyles ;
CanvasRenderingContext2D includes CanvasTextDrawingStyles ;
CanvasRenderingContext2D includes CanvasPath ;
interface mixin CanvasState {
// state
undefined save (); // push state on state stack
undefined restore (); // pop state stack and restore state
undefined reset (); // reset the rendering context to its default state
boolean isContextLost (); // return whether context is lost
};
interface mixin CanvasTransform {
// transformations (default transform is the identity matrix)
undefined scale (unrestricted double x , unrestricted double y );
undefined rotate (unrestricted double angle );
undefined translate (unrestricted double x , unrestricted double y );
undefined transform (unrestricted double a , unrestricted double b , unrestricted double c , unrestricted double d , unrestricted double e , unrestricted double f );
[NewObject ] DOMMatrix getTransform ();
undefined setTransform (unrestricted double a , unrestricted double b , unrestricted double c , unrestricted double d , unrestricted double e , unrestricted double f );
undefined setTransform (optional DOMMatrix2DInit transform = {});
undefined resetTransform ();
};
interface mixin CanvasCompositing {
// compositing
attribute unrestricted double globalAlpha ; // (default 1.0)
attribute DOMString globalCompositeOperation ; // (default "source-over")
};
interface mixin CanvasImageSmoothing {
// image smoothing
attribute boolean imageSmoothingEnabled ; // (default true)
attribute ImageSmoothingQuality imageSmoothingQuality ; // (default low)
};
interface mixin CanvasFillStrokeStyles {
// colors and styles (see also the CanvasPathDrawingStyles and CanvasTextDrawingStyles interfaces)
attribute (DOMString or CanvasGradient or CanvasPattern ) strokeStyle ; // (default black)
attribute (DOMString or CanvasGradient or CanvasPattern ) fillStyle ; // (default black)
CanvasGradient createLinearGradient (double x0 , double y0 , double x1 , double y1 );
CanvasGradient createRadialGradient (double x0 , double y0 , double r0 , double x1 , double y1 , double r1 );
CanvasGradient createConicGradient (double startAngle , double x , double y );
CanvasPattern ? createPattern (CanvasImageSource image , [LegacyNullToEmptyString ] DOMString repetition );
};
interface mixin CanvasShadowStyles {
// shadows
attribute unrestricted double shadowOffsetX ; // (default 0)
attribute unrestricted double shadowOffsetY ; // (default 0)
attribute unrestricted double shadowBlur ; // (default 0)
attribute DOMString shadowColor ; // (default transparent black)
};
interface mixin CanvasFilters {
// filters
attribute DOMString filter ; // (default "none")
};
interface mixin CanvasRect {
// rects
undefined clearRect (unrestricted double x , unrestricted double y , unrestricted double w , unrestricted double h );
undefined fillRect (unrestricted double x , unrestricted double y , unrestricted double w , unrestricted double h );
undefined strokeRect (unrestricted double x , unrestricted double y , unrestricted double w , unrestricted double h );
};
interface mixin CanvasDrawPath {
// path API (see also CanvasPath)
undefined beginPath ();
undefined fill (optional CanvasFillRule fillRule = "nonzero");
undefined fill (Path2D path , optional CanvasFillRule fillRule = "nonzero");
undefined stroke ();
undefined stroke (Path2D path );
undefined clip (optional CanvasFillRule fillRule = "nonzero");
undefined clip (Path2D path , optional CanvasFillRule fillRule = "nonzero");
boolean isPointInPath (unrestricted double x , unrestricted double y , optional CanvasFillRule fillRule = "nonzero");
boolean isPointInPath (Path2D path , unrestricted double x , unrestricted double y , optional CanvasFillRule fillRule = "nonzero");
boolean isPointInStroke (unrestricted double x , unrestricted double y );
boolean isPointInStroke (Path2D path , unrestricted double x , unrestricted double y );
};
interface mixin CanvasUserInterface {
undefined drawFocusIfNeeded (Element element );
undefined drawFocusIfNeeded (Path2D path , Element element );
};
interface mixin CanvasText {
// text (see also the CanvasPathDrawingStyles and CanvasTextDrawingStyles interfaces)
undefined fillText (DOMString text , unrestricted double x , unrestricted double y , optional unrestricted double maxWidth );
undefined strokeText (DOMString text , unrestricted double x , unrestricted double y , optional unrestricted double maxWidth );
TextMetrics measureText (DOMString text );
};
interface mixin CanvasDrawImage {
// drawing images
undefined drawImage (CanvasImageSource image , unrestricted double dx , unrestricted double dy );
undefined drawImage (CanvasImageSource image , unrestricted double dx , unrestricted double dy , unrestricted double dw , unrestricted double dh );
undefined drawImage (CanvasImageSource image , unrestricted double sx , unrestricted double sy , unrestricted double sw , unrestricted double sh , unrestricted double dx , unrestricted double dy , unrestricted double dw , unrestricted double dh );
};
interface mixin CanvasImageData {
// pixel manipulation
ImageData createImageData ([EnforceRange ] long sw , [EnforceRange ] long sh , optional ImageDataSettings settings = {});
ImageData createImageData (ImageData imagedata );
ImageData getImageData ([EnforceRange ] long sx , [EnforceRange ] long sy , [EnforceRange ] long sw , [EnforceRange ] long sh , optional ImageDataSettings settings = {});
undefined putImageData (ImageData imagedata , [EnforceRange ] long dx , [EnforceRange ] long dy );
undefined putImageData (ImageData imagedata , [EnforceRange ] long dx , [EnforceRange ] long dy , [EnforceRange ] long dirtyX , [EnforceRange ] long dirtyY , [EnforceRange ] long dirtyWidth , [EnforceRange ] long dirtyHeight );
};
enum CanvasLineCap { "butt" , "round" , "square" };
enum CanvasLineJoin { "round" , "bevel" , "miter" };
enum CanvasTextAlign { " start " , " end " , " left " , " right " , " center " };
enum CanvasTextBaseline { " top " , " hanging " , " middle " , " alphabetic " , " ideographic " , " bottom " };
enum CanvasDirection { " ltr " , " rtl " , " inherit " };
enum CanvasFontKerning { " auto " , " normal " , " none " };
enum CanvasFontStretch { " ultra-condensed " , " extra-condensed " , " condensed " , " semi-condensed " , " normal " , " semi-expanded " , " expanded " , " extra-expanded " , " ultra-expanded " };
enum CanvasFontVariantCaps { " normal " , " small-caps " , " all-small-caps " , " petite-caps " , " all-petite-caps " , " unicase " , " titling-caps " };
enum CanvasTextRendering { " auto " , " optimizeSpeed " , " optimizeLegibility " , " geometricPrecision " };
interface mixin CanvasPathDrawingStyles {
// line caps/joins
attribute unrestricted double lineWidth ; // (default 1)
attribute CanvasLineCap lineCap ; // (default "butt")
attribute CanvasLineJoin lineJoin ; // (default "miter")
attribute unrestricted double miterLimit ; // (default 10)
// dashed lines
undefined setLineDash (sequence <unrestricted double > segments ); // default empty
sequence <unrestricted double > getLineDash ();
attribute unrestricted double lineDashOffset ;
};
interface mixin CanvasTextDrawingStyles {
// text
attribute DOMString font ; // (default 10px sans-serif)
attribute CanvasTextAlign textAlign ; // (default: "start")
attribute CanvasTextBaseline textBaseline ; // (default: "alphabetic")
attribute CanvasDirection direction ; // (default: "inherit")
attribute DOMString letterSpacing ; // (default: "0px")
attribute CanvasFontKerning fontKerning ; // (default: "auto")
attribute CanvasFontStretch fontStretch ; // (default: "normal")
attribute CanvasFontVariantCaps fontVariantCaps ; // (default: "normal")
attribute CanvasTextRendering textRendering ; // (default: "auto")
attribute DOMString wordSpacing ; // (default: "0px")
};
interface mixin CanvasPath {
// shared path API methods
undefined closePath ();
undefined moveTo (unrestricted double x , unrestricted double y );
undefined lineTo (unrestricted double x , unrestricted double y );
undefined quadraticCurveTo (unrestricted double cpx , unrestricted double cpy , unrestricted double x , unrestricted double y );
undefined bezierCurveTo (unrestricted double cp1x , unrestricted double cp1y , unrestricted double cp2x , unrestricted double cp2y , unrestricted double x , unrestricted double y );
undefined arcTo (unrestricted double x1 , unrestricted double y1 , unrestricted double x2 , unrestricted double y2 , unrestricted double radius );
undefined rect (unrestricted double x , unrestricted double y , unrestricted double w , unrestricted double h );
undefined roundRect (unrestricted double x , unrestricted double y , unrestricted double w , unrestricted double h , optional (unrestricted double or DOMPointInit or sequence <(unrestricted double or DOMPointInit )>) radii = 0);
undefined arc (unrestricted double x , unrestricted double y , unrestricted double radius , unrestricted double startAngle , unrestricted double endAngle , optional boolean counterclockwise = false );
undefined ellipse (unrestricted double x , unrestricted double y , unrestricted double radiusX , unrestricted double radiusY , unrestricted double rotation , unrestricted double startAngle , unrestricted double endAngle , optional boolean counterclockwise = false );
};
[Exposed =(Window ,Worker )]
interface CanvasGradient {
// opaque object
undefined addColorStop (double offset , DOMString color );
};
[Exposed =(Window ,Worker )]
interface CanvasPattern {
// opaque object
undefined setTransform (optional DOMMatrix2DInit transform = {});
};
[Exposed =(Window ,Worker )]
interface TextMetrics {
// x-direction
readonly attribute double width ; // advance width
readonly attribute double actualBoundingBoxLeft ;
readonly attribute double actualBoundingBoxRight ;
// y-direction
readonly attribute double fontBoundingBoxAscent ;
readonly attribute double fontBoundingBoxDescent ;
readonly attribute double actualBoundingBoxAscent ;
readonly attribute double actualBoundingBoxDescent ;
readonly attribute double emHeightAscent ;
readonly attribute double emHeightDescent ;
readonly attribute double hangingBaseline ;
readonly attribute double alphabeticBaseline ;
readonly attribute double ideographicBaseline ;
};
dictionary ImageDataSettings {
PredefinedColorSpace colorSpace ;
};
[Exposed =(Window ,Worker ),
Serializable ]
interface ImageData {
constructor (unsigned long sw , unsigned long sh , optional ImageDataSettings settings = {});
constructor (Uint8ClampedArray data , unsigned long sw , optional unsigned long sh , optional ImageDataSettings settings = {});
readonly attribute unsigned long width ;
readonly attribute unsigned long height ;
readonly attribute Uint8ClampedArray data ;
readonly attribute PredefinedColorSpace colorSpace ;
};
[Exposed =(Window ,Worker )]
interface Path2D {
constructor (optional (Path2D or DOMString ) path );
undefined addPath (Path2D path , optional DOMMatrix2DInit transform = {});
};
Path2D includes CanvasPath ;为了保持与现有 Web 内容的兼容性，用户代理需要在 CanvasUserInterface 中定义的方法之后，立即在 CanvasRenderingContext2D 对象上的 stroke() 方法之后枚举方法。
context = canvas.getContext('2d' [, { [ alpha: true ] [, desynchronized: false ] [, colorSpace: 'srgb'] [, willReadFrequently: false ]} ])返回一个与特定 canvas 元素永久绑定的 CanvasRenderingContext2D 对象。
如果 alpha 成员为 false，则强制上下文始终为不透明。
如果 desynchronized 成员为 true，则上下文可能被 异步。
The colorSpace 成员指定渲染上下文的 颜色空间。
如果 willReadFrequently 成员为 true，则上下文被标记为 回读优化。
context.canvasCanvasRenderingContext2D/canvas
在所有当前引擎中都受支持。
返回 canvas 元素。
attributes = context.getContextAttributes()返回一个对象，其
alpha 成员如果上下文具有 alpha 通道，则为 true，否则为 false。desynchronized 成员如果上下文可以 异步，则为 true。colorSpace 成员是指示上下文的 颜色空间 的字符串。willReadFrequently 成员如果上下文被标记为 回读优化，则为 true。一个 CanvasRenderingContext2D 对象有一个 输出位图，该位图在对象创建时初始化。
该 输出位图 具有一个 origin-clean 标志，可以设置为 true 或 false。最初，当这些位图之一创建时，其 origin-clean 标志必须设置为 true。
The CanvasRenderingContext2D 对象还有一个 alpha 布尔值。当 CanvasRenderingContext2D 对象的 alpha 为 false 时，其 alpha 通道必须固定为 1.0（完全不透明）对于所有像素，任何像素的 alpha 分量的更改尝试必须被静默忽略。
因此，此类上下文的位图从 不透明黑色 开始，而不是 透明黑色；clearRect() 始终导致 不透明黑色 像素，来自 getImageData() 的每四个字节始终为 255，该 putImageData() 方法有效地忽略其输入中的每四个字节，等等。但是，绘制在画布上的样式和图像的 alpha 分量仍然得到认可，直到它们会影响 输出位图 的 alpha 通道；例如，在新建的 输出位图 上绘制一个 50% 透明的白色正方形，其 alpha 设置为 false 将导致一个完全不透明的灰色正方形。
The CanvasRenderingContext2D 对象还有一个 异步 布尔值。当 CanvasRenderingContext2D 对象的 异步 为 true 时，用户代理可能会优化画布的渲染以减少延迟，如从输入事件到光栅化的测量，通过将画布绘制周期与事件循环异步化，绕过普通用户代理渲染算法，或两者兼而有之。就这种模式涉及绕过通常的绘制机制、光栅化或两者而言，它可能会引入可见的撕裂伪影。
用户代理通常会在未显示的缓冲区上进行渲染，并快速将其与正在扫描输出以进行呈现的缓冲区进行交换；前者称为后备缓冲区，后者称为前备缓冲区。一种用于减少延迟的流行技术称为前备缓冲区渲染，也称为单缓冲区渲染，其中渲染与扫描输出过程并行和竞争地发生。这种技术以可能引入撕裂伪影为代价来减少延迟，可用于全部或部分实现 异步 布尔值。 [MULTIPLEBUFFERING]
当实现某些类型的应用程序（例如绘图应用程序）时，异步 布尔值可能很有用，在这些应用程序中，输入和光栅化之间的延迟至关重要。
The CanvasRenderingContext2D 对象还有一个 频繁读取 布尔值。当 CanvasRenderingContext2D 对象的 频繁读取 为 true 时，用户代理可能会优化画布以进行回读操作。
在大多数设备上，用户代理需要决定是将画布的 输出位图 存储在 GPU 上（这也被称为“硬件加速”），还是存储在 CPU 上（这也被称为“软件”）。对于加速的画布，大多数渲染操作的性能更高，主要例外是使用 getImageData()、toDataURL() 或 toBlob() 进行回读。具有 频繁读取 等于 true 的 CanvasRenderingContext2D 对象告诉用户代理，网页可能会执行许多回读操作，并且使用软件画布是有利的。
The CanvasRenderingContext2D 对象还有一个 颜色空间 设置，类型为 PredefinedColorSpace。该 CanvasRenderingContext2D 对象的 颜色空间 指示 输出位图 的颜色空间。
The getContextAttributes() 方法的步骤是返回 «[ "alpha" → this 的 alpha，"desynchronized" → this 的 异步，"colorSpace" → this 的 颜色空间，"willReadFrequently" → this 的 频繁读取 ]»。
The CanvasRenderingContext2D 2D 渲染上下文表示一个平面线性笛卡尔表面，其原点 (0,0) 位于左上角，坐标空间的 x 值在向右移动时增加，y 值在向下移动时增加。最右边缘的 x 坐标等于渲染上下文的 输出位图 在 CSS 像素 中的宽度；类似地，最下边缘的 y 坐标等于渲染上下文的 输出位图 在 CSS 像素 中的高度。
坐标空间的大小不一定代表用户代理在内部或渲染过程中将使用的实际位图的大小。例如，在高分辨率显示器上，用户代理可能在内部使用具有每个坐标空间单位四个设备像素的位图，以便渲染在整个过程中保持高质量。反锯齿可以通过使用比显示器上的最终图像分辨率更高的位图进行过采样来类似地实现。
使用 CSS 像素 来描述渲染上下文的 输出位图 的大小并不意味着当渲染时，画布将覆盖 CSS 像素 中的等效区域。为了便于与 CSS 功能（例如文本布局）集成，CSS 像素 被重复使用。
换句话说，下面 canvas 元素的渲染上下文具有 200x200 输出位图（内部使用 CSS 像素 作为单位以方便与 CSS 集成）并渲染为 100x100 CSS 像素
< canvas width = 200 height = 200 style = width:100px;height:100px > The 2D 上下文创建算法，它传递一个 target（一个 canvas 元素）和 options，包含运行以下步骤。
设 settings 为将 options 转换为字典类型 CanvasRenderingContext2DSettings 的结果。（这可能会抛出异常）。
设 context 为一个新的 CanvasRenderingContext2D 对象。
初始化 context 的 canvas 属性以指向 target。
将 context 的 输出位图 设置为与 target 的位图相同的位图（以便它们共享）。
设置 context 的 alpha 为 settings["alpha"]。
设置 context 的 desynchronized 为 settings["desynchronized"]。
设置 context 的 颜色空间 为 settings["colorSpace"]。
设置 context 的 频繁读取 为 settings["willReadFrequently"]。
返回context.
当用户代理需要 设置位图尺寸 为 width 和 height 时，它必须执行以下步骤
将 输出位图 的尺寸调整为新的 width 和 height。
如果 canvas 的 width 内容属性的 数值 与 width 不同，则将 canvas 的 width 内容属性设置为表示 width 的最短可能的字符串，作为一个 有效的非负整数。
如果 canvas 的 height 内容属性的 数值 与 height 不同，则将 canvas 的 height 内容属性设置为表示 height 的最短可能的字符串，作为一个 有效的非负整数。
在下面的示例中，只有一个正方形被绘制。
// canvas is a reference to a <canvas> element
var context = canvas. getContext( '2d' );
context. fillRect( 0 , 0 , 50 , 50 );
canvas. setAttribute( 'width' , '300' ); // clears the canvas
context. fillRect( 0 , 100 , 50 , 50 );
canvas. width = canvas. width; // clears the canvas
context. fillRect( 100 , 0 , 50 , 50 ); // only this square remains 当对象被创建时，canvas 属性必须返回其初始化的值。
PredefinedColorSpace 枚举用于指定画布的后台存储的 颜色空间。
值 "srgb" 指示 'srgb' 颜色空间。
值 "display-p3" 指示 'display-p3' 颜色空间。
在 CSS Color 的 预定义颜色空间 部分中可以找到颜色空间转换的算法。 [CSSCOLOR]
CanvasFillRule 枚举用于选择 填充规则 算法，该算法用于确定点在路径内部还是外部。
值 "nonzero" 指示非零绕线规则，其中，如果从该点绘制的半无限直线与形状路径的交叉次数在某一个方向上等于它在另一个方向上与路径的交叉次数，则该点被认为在形状外部。
值 "evenodd" 指示奇偶规则，其中，如果从该点绘制的半无限直线与形状路径的交叉次数为偶数，则该点被认为在形状外部。
如果一个点不在形状外部，则它在形状内部。
ImageSmoothingQuality 枚举用于表达对在平滑图像时使用的插值质量的偏好。
值 "low" 指示对低级别的图像插值质量的偏好。低质量的图像插值可能比更高的设置更节省计算资源。
值 "medium" 指示对中等级别的图像插值质量的偏好。
值 "high" 指示对高级别的图像插值质量的偏好。高质量的图像插值可能比更低的设置更耗费计算资源。
双线性缩放是一个相对快速的、低质量的图像平滑算法的例子。双三次或兰索斯缩放是产生更高质量输出的图像平滑算法的例子。本规范不强制要求使用特定的插值算法。
本节是非规范性的。
当 输出位图 不由用户代理直接显示时，实现可以仅记住应用于该位图的绘图操作序列，而不是更新该位图，直到需要该位图的实际数据（例如，由于调用 drawImage() 或 createImageBitmap() 工厂方法）。在许多情况下，这将更节省内存。
canvas 元素的位图是实际应用中最可能需要的位图。渲染上下文的 输出位图（如果有）始终只是 canvas 元素的位图的别名。
有时还需要额外的位图，例如，当画布以与其 自然尺寸 不同的尺寸绘制时，或为了启用双缓冲，以便可以同时处理图形更新（例如页面滚动）和正在执行的画布绘制命令。
实现 CanvasState 接口的对象维护一个绘图状态栈。绘图状态 包括：
当前的 变换矩阵。
当前的 裁剪区域。
以下属性的当前值：lineWidth、lineCap、lineJoin、miterLimit、lineDashOffset、shadowOffsetX、shadowOffsetY、shadowBlur、font、textAlign、textBaseline、direction、fontKerning、fontStretch、fontVariantCaps、textRendering、imageSmoothingEnabled、imageSmoothingQuality。
当前的 虚线列表。
渲染上下文的位图不是绘图状态的一部分，因为它们取决于渲染上下文是否以及如何绑定到 canvas 元素。
实现 CanvasState 混合类的对象有一个 上下文丢失 布尔值，该值在对象创建时初始化为 false。在 上下文丢失步骤 中更新 上下文丢失 值。
context.save()在所有当前引擎中都受支持。
将当前状态推入堆栈。
context.restore()CanvasRenderingContext2D/restore
在所有当前引擎中都受支持。
从堆栈中弹出顶层状态，并将上下文恢复到该状态。
context.reset()重置渲染上下文，包括后台缓冲区、绘图状态栈、路径和样式。
context.isContextLost()如果渲染上下文已丢失，则返回 true。上下文丢失可能是由于驱动程序崩溃、内存不足等原因造成的。在这种情况下，画布会丢失其后台存储，并采取措施 将渲染上下文重置为其默认状态。
save() 方法的步骤是将当前绘图状态的副本推入绘图状态栈。
restore() 方法的步骤是从绘图状态栈中弹出顶层条目，并重置它描述的绘图状态。如果没有保存的状态，则该方法必须不执行任何操作。
CanvasRenderingContext2D/reset
OffscreenCanvasRenderingContext2D#canvasrenderingcontext2d.reset
reset() 方法的步骤是 将渲染上下文重置为其默认状态。
要将渲染上下文重置为其默认状态
CanvasRenderingContext2D/isContextLost
仅在一个引擎中支持。
方法isContextLost()的步骤是返回this的上下文丢失。
context.lineWidth [ = value ]CanvasRenderingContext2D/lineWidth
在所有当前引擎中都受支持。
styles.lineWidth [ = value ]返回当前线宽。
可以设置，以更改线宽。不为大于零的有限值的数值将被忽略。
context.lineCap [ = value ]CanvasRenderingContext2D/lineCap
在所有当前引擎中都受支持。
styles.lineCap [ = value ]返回当前线帽样式。
可以设置，以更改线帽样式。
可能的线帽样式为 "butt"、"round" 和 "square"。其他数值将被忽略。
context.lineJoin [ = value ]CanvasRenderingContext2D/lineJoin
在所有当前引擎中都受支持。
styles.lineJoin [ = value ]返回当前线连接样式。
可以设置，以更改线连接样式。
可能的线连接样式为 "bevel"、"round" 和 "miter"。其他数值将被忽略。
context.miterLimit [ = value ]CanvasRenderingContext2D/miterLimit
在所有当前引擎中都受支持。
styles.miterLimit [ = value ]返回当前斜接限制比率。
可以设置，以更改斜接限制比率。不为大于零的有限值的数值将被忽略。
context.setLineDash(segments)CanvasRenderingContext2D/setLineDash
在所有当前引擎中都受支持。
styles.setLineDash(segments)设置当前线虚线图案（在描边时使用）。参数是一个距离列表，用于交替显示线段的显示和隐藏状态。
segments = context.getLineDash()CanvasRenderingContext2D/getLineDash
在所有当前引擎中都受支持。
segments = styles.getLineDash()返回当前线虚线图案的副本。返回的数组始终具有偶数个条目（即图案被标准化）。
context.lineDashOffsetCanvasRenderingContext2D/lineDashOffset
在所有当前引擎中都受支持。
styles.lineDashOffset返回相位偏移量（以与线虚线图案相同的单位表示）。
可以设置，以更改相位偏移量。不为有限值的数值将被忽略。
实现 CanvasPathDrawingStyles 接口的对象具有属性和方法（在本节中定义），这些属性和方法控制对象如何处理线条。
属性lineWidth给出线的宽度，以坐标空间单位表示。在获取时，它必须返回当前值。在设置时，零、负数、无穷大和 NaN 值必须被忽略，保持值不变；其他值必须将当前值更改为新值。
当创建实现 CanvasPathDrawingStyles 接口的对象时，属性 lineWidth 的初始值为 1.0。
属性lineCap定义了 UA 将在线段末端放置的结束类型。三个有效值为 "butt"、"round" 和 "square"。
在获取时，它必须返回当前值。在设置时，当前值必须更改为新值。
当创建实现 CanvasPathDrawingStyles 接口的对象时，属性 lineCap 的初始值为 "butt"。
属性lineJoin定义了 UA 将在两条线相交处放置的拐角类型。三个有效值为 "bevel"、"round" 和 "miter"。
在获取时，它必须返回当前值。在设置时，当前值必须更改为新值。
当创建实现 CanvasPathDrawingStyles 接口的对象时，属性 lineJoin 的初始值为 "miter"。
当属性 lineJoin 的值为 "miter" 时，描边使用斜接限制比率来决定如何渲染连接。斜接限制比率可以使用属性miterLimit显式设置。在获取时，它必须返回当前值。在设置时，零、负数、无穷大和 NaN 值必须被忽略，保持值不变；其他值必须将当前值更改为新值。
当创建实现 CanvasPathDrawingStyles 接口的对象时，属性 miterLimit 的初始值为 10.0。
每个 CanvasPathDrawingStyles 对象都有一个虚线列表，它要么为空，要么包含偶数个非负数。最初，虚线列表必须为空。
当调用方法setLineDash(segments)时，它必须运行以下步骤
如果 segments 中的任何值为非有限值（例如 Infinity 或 NaN 值），或者如果任何值为负数（小于零），则返回（不抛出异常；尽管如此，用户代理可以在开发者控制台中显示一条消息，因为这对调试很有帮助）。
如果 segments 中的元素数量为奇数，则让 segments 为 segments 的两个副本的串联。
让对象的 虚线列表 为 segments。
当调用方法getLineDash()时，它必须返回一个序列，其值与对象的 虚线列表 的值相同，顺序也相同。
更改虚线图案的“相位”有时很有用，例如，要实现“移动蚂蚁”效果。可以使用属性lineDashOffset设置相位。在获取时，它必须返回当前值。在设置时，无穷大和 NaN 值必须被忽略，保持值不变；其他值必须将当前值更改为新值。
当创建实现 CanvasPathDrawingStyles 接口的对象时，属性 lineDashOffset 的初始值为 0.0。
当用户代理要跟踪路径时，给定一个实现 CanvasPathDrawingStyles 接口的对象 style，它必须运行以下算法。此算法返回一个新的 路径。
让 path 为被跟踪路径的副本。
从 path 中修剪掉所有长度为零的 线段。
从 path 中删除所有不包含线的子路径（即仅包含一个点的子路径）。
将 path 中每个子路径中除第一个点和最后一个点以外的所有点替换为一个连接点，该连接点将通向该点的线连接到从该点引出的线，这样所有子路径都包含两个点（一个起点，有一条线从它引出，以及一个终点，有一条线通向它）、一条或多条线（连接这些点和连接点），以及零条或多条连接点（每个连接点连接一条线到另一条线），这些点和线互相连接，这样每个子路径都是一系列一个或多个线，每条线之间都有一个连接点，并且每个端点上都有一点。
在 path 中的每个封闭子路径中添加一条笔直的闭合线，连接该子路径的最后一个点和第一个点；将最后一个点更改为一个连接点（从之前的最后一条线到新添加的闭合线），并将第一个点更改为一个连接点（从新添加的闭合线到第一条线）。
如果 style 的 虚线列表 为空，则跳到标记为转换的步骤。
让 图案宽度 为 style 的 虚线列表 中所有条目的串联，以坐标空间单位表示。
对于 path 中的每个子路径 subpath，运行以下子步骤。这些子步骤会就地修改 path 中的子路径。
让 子路径宽度 为 subpath 中所有线的长度，以坐标空间单位表示。
让 offset 为 style 的 lineDashOffset 的值，以坐标空间单位表示。
当 offset 大于 pattern width 时，将它减去 pattern width。
当 offset 小于零时，将它加上 pattern width。
将 L 定义为一个线性坐标线，该线定义在 subpath 中的所有线上，这样子路径中第一条线的起点被定义为坐标 0，子路径中最后一条线的终点被定义为坐标 subpath width。
让 position 为零减去 offset。
让 index 为 0。
让 当前状态 为关闭（其他状态为开启和零开启）。
线段开启：让 线段长度 为 style 的 虚线列表 的第 index 个条目的值。
将 position 加上 线段长度。
如果 position 大于 subpath width，则结束该子路径的这些子步骤并针对下一个子路径重新开始；如果没有更多子路径，则跳转到标记为 convert 的步骤。
如果 segment length 非零，则令 current state 为 on。
将 index 加 1。
Dash off：令 segment length 为 style 的 dash list 的 index 第个条目。
令 start 为 L 上的偏移量 position。
将 position 加上 线段长度。
如果 position 小于零，则跳转到标记为 post-cut 的步骤。
如果 start 小于零，则令 start 为零。
如果 position 大于 subpath width，则令 end 为 L 上的偏移量 subpath width。否则，令 end 为 L 上的偏移量 position。
跳转到第一个合适的步骤
不执行任何操作，只需继续到下一步。
在 end 处将 end 所在的线截断，并在该处放置一个点，将它所在的子路径一分为二；删除 start 和 end 之间的所有线段、连接点、点和子路径；最后在 start 处放置一个点，没有线连接到它。
该点具有用于绘制线帽的 方向性（见下文）。方向性是原始线在该点处的方向（即当 L 在上面定义时）。
在 start 处将 start 所在的线一分为二，并在该处放置一个点，将它所在的子路径一分为二，类似地在 end 处将 end 所在的线截断，并在该处放置一个点，将它所在的子路径一分为二，然后删除 start 和 end 之间的所有线段、连接点、点和子路径。
如果 start 和 end 是同一个点，则这将导致只将线一分为二并在那里插入两个点，不删除任何内容，除非连接点也恰好位于该点，在这种情况下，必须删除连接点。
Post-cut：如果 position 大于 subpath width，则跳转到标记为 convert 的步骤。
如果 segment length 大于零，则令 positioned-at-on-dash 为 false。
将 index 加 1。如果它等于 style 的 dash list 中的条目数，则令 index 为 0。
返回到标记为 dash on 的步骤。
Convert：此步骤将路径转换为表示其笔划的新路径。
创建一个新的 path，它描述了如果沿 path 中的每个子路径扫描长度等于 style 的 lineWidth 的直线（同时保持直线与被扫描的路径正交），则覆盖的区域的边缘，将每个点替换为满足 style 的 lineCap 属性（如前所述并在下面详细说明）所需的端帽，并将每个连接点替换为满足 style 的 lineJoin 类型（如下所定义）所需的连接点。
端帽：每个点都有一个垂直于从它出来的线的平坦边缘。然后根据 style 的 lineCap 值对其进行增强。"butt" 值表示不添加额外的线帽。"round" 值表示必须在从每个点出来的线上另外放置一个直径等于 style 的 lineWidth 宽度 的半圆。"square" 值表示必须在每个点处添加一个矩形，该矩形的长度等于 style 的 lineWidth 宽度，宽度等于 style 的 lineWidth 宽度的二分之一，该矩形平放在垂直于从点出来的线方向的边缘上。
没有线出来的点必须放置两个背靠背的端帽，就好像它实际上是两个点，它们通过方向为点 方向性（如上所定义）的极短直线连接在一起。
连接点：除了连接点发生的位置外，与每个连接点相关的还有两个附加点，每个线一个：从连接点处距离为线宽一半的两个角，一个垂直于每条线，另一个在最远离另一条线的侧。
必须在所有连接点处添加一个三角形，该三角形用直线连接这两个相对角，该三角形的第三个点是连接点。lineJoin 属性控制是否渲染其他任何内容。上述三个值具有以下含义
"bevel" 值表示这是连接点处渲染的所有内容。
"round" 值表示必须在连接点处添加一个连接上述连接点两个角的圆弧，该圆弧与上述三角形相接（不重叠），直径等于线宽，原点位于连接点处。
"miter" 值表示必须（如果在给定斜接长度的情况下可以）在连接点处添加第二个三角形，其中一条线是连接上述两个角的线，与第一个三角形相接，另外两条线是两条连接线的外部边缘的延续，只要需要，它们必须在不超过斜接长度的情况下相交。
斜接长度是连接点发生的位置到连接点外部线边缘交点的距离。斜接限制比是斜接长度与线宽一半的最大允许比率。如果斜接长度会导致超过斜接限制比（由 style 的 miterLimit 属性设置），则不应添加此第二个三角形。
新创建的路径中的子路径必须定向，以使对于任何点，从该点绘制的半无限直线与子路径的交叉次数为偶数当且仅当从该相同点绘制的半无限直线与一个方向上的子路径的交叉次数等于它与另一个方向上的子路径的交叉次数。
返回新创建的路径。
context.font [ = value ]在所有当前引擎中都受支持。
styles.font [ = value ]返回当前字体设置。
可以设置，以更改字体。语法与 CSS 的 'font' 属性相同；无法解析为 CSS 字体值的将被忽略。
相对关键字和长度是相对于 canvas 元素的字体计算的。
context.textAlign [ = value ]CanvasRenderingContext2D/textAlign
在所有当前引擎中都受支持。
styles.textAlign [ = value ]返回当前文本对齐设置。
可以设置，以更改对齐方式。可能的取值及其含义如下。其他值将被忽略。默认值为 "start"。
context.textBaseline [ = value ]CanvasRenderingContext2D/textBaseline
在所有当前引擎中都受支持。
styles.textBaseline [ = value ]返回当前基线对齐设置。
可以设置，以更改基线对齐方式。可能的取值及其含义如下。其他值将被忽略。默认值为 "alphabetic"。
context.direction [ = value ]CanvasRenderingContext2D/direction
在所有当前引擎中都受支持。
styles.direction [ = value ]返回当前方向性。
可以设置，以更改方向性。可能的取值及其含义如下。其他值将被忽略。默认值为 "inherit"。
context.letterSpacing [ = value ]styles.letterSpacing [ = value ]返回文本中字符之间的当前间距。
可以设置，以更改字符之间的间距。无法解析为 CSS 的 <length> 的值将被忽略。默认值为 "0px"。
context.fontKerning [ = value ]styles.fontKerning [ = value ]返回当前字体字距调整设置。
可以设置，以更改字体字距调整。可能的取值及其含义如下。其他值将被忽略。默认值为 "auto"。
context.fontStretch [ = value ]styles.fontStretch [ = value ]返回当前字体拉伸设置。
可以设置，以更改字体拉伸。可能的取值及其含义如下。其他值将被忽略。默认值为 "normal"。
context.fontVariantCaps [ = value ]styles.fontVariantCaps [ = value ]返回当前字体变体大小写设置。
可以设置，以更改字体变体大小写。可能的取值及其含义如下。其他值将被忽略。默认值为 "normal"。
context.textRendering [ = value ]styles.textRendering [ = value ]返回当前文本渲染设置。
可以设置，以更改文本渲染。可能的取值及其含义如下。其他值将被忽略。默认值为 "auto"。
context.wordSpacing [ = value ]styles.wordSpacing [ = value ]返回文本中单词之间的当前间距。
可以设置，以更改单词之间的间距。无法解析为 CSS <length> 的值将被忽略。默认值为 "0px"。
实现 CanvasTextDrawingStyles 接口的对象具有控制对象如何布局（光栅化或轮廓化）文本的属性（在本节中定义）。此类对象还可以具有 字体样式源对象。对于 CanvasRenderingContext2D 对象，这是由上下文 canvas 属性值给出的 canvas 元素。对于 OffscreenCanvasRenderingContext2D 对象，这是 关联的 OffscreenCanvas 对象。
字体样式源对象 的字体分辨率需要一个 字体源。这是通过以下步骤为实现 CanvasTextDrawingStyles 的给定 object 确定的：[CSSFONTLOAD]
否则，object 的 字体样式源对象 是一个 OffscreenCanvas 对象
令 global 为 object 的 相关全局对象。
如果 global 是一个 Window 对象，则返回 global 的 关联的 Document。
断言：global 实现 WorkerGlobalScope。
返回 global。
这是使用具有 ID c1 的常规 canvas 元素进行字体解析的示例。
const font = new FontFace( "MyCanvasFont" , "url(mycanvasfont.ttf)" );
documents. fonts. add( font);
const context = document. getElementById( "c1" ). getContext( "2d" );
document. fonts. ready. then( function () {
context. font = "64px MyCanvasFont" ;
context. fillText( "hello" , 0 , 0 );
}); 在此示例中，画布将使用 mycanvasfont.ttf 作为其字体显示文本。
这是使用 OffscreenCanvas 如何进行字体解析的示例。假设一个具有 ID c2 的 canvas 元素，它被像这样传输到工作线程
const offscreenCanvas = document. getElementById( "c2" ). transferControlToOffscreen();
worker. postMessage( offscreenCanvas, [ offscreenCanvas]); 然后，在工作线程中
self. onmessage = function ( ev) {
const transferredCanvas = ev. data;
const context = transferredCanvas. getContext( "2d" );
const font = new FontFace( "MyFont" , "url(myfont.ttf)" );
self. fonts. add( font);
self. fonts. ready. then( function () {
context. font = "64px MyFont" ;
context. fillText( "hello" , 0 , 0 );
});
}; 在此示例中，画布将使用 myfont.ttf 显示文本。请注意，字体仅在工作线程中加载，而不是在文档上下文中加载。
font IDL 属性在设置时，必须 解析为 CSS <'font'> 值（但不支持像 'inherit' 这样的与属性无关的样式表语法），并且生成的字体必须分配给上下文， 'line-height' 组件强制为 'normal'， 'font-size' 组件转换为 CSS 像素，并且系统字体被计算为显式值。如果新值在语法上不正确（包括使用像 'inherit' 或 'initial' 这样的与属性无关的样式表语法），则它必须被忽略，而不分配新的字体值。 [CSS]
当使用字体时，必须在 字体样式源对象 的上下文中解释字体系列名称；因此，使用 @font-face 嵌入或使用 FontFace 对象加载的任何对 字体样式源对象 可见的字体，必须在加载后可用。（每个 字体样式源对象 都有一个 字体源，它决定了哪些字体可用。）如果字体在完全加载之前被使用，或者如果 字体样式源对象 在使用字体时没有该字体在范围内，则它必须被视为未知字体，按照相关的 CSS 规范回退到另一个字体。 [CSSFONTS] [CSSFONTLOAD]
在获取时， font 属性必须返回上下文的当前字体的 序列化形式（没有 'line-height' 组件）。 [CSSOM]
例如，在以下语句之后
context. font = 'italic 400 12px/2 Unknown Font, sans-serif' ; ...表达式 context.font 将评估为字符串 "italic 12px "Unknown Font", sans-serif"。由于 "400" 字重是默认值，因此它不会出现。行高不会出现，因为它被强制为 "normal"，即默认值。
当实现 CanvasTextDrawingStyles 接口的对象被创建时，上下文的字体必须设置为 10px sans-serif。当 'font-size' 组件使用百分比、 'em' 或 'ex' 单位或 'larger' 或 'smaller' 关键字设置长度时，这些必须相对于 计算值 解释 'font-size' 属性的 字体样式源对象 在设置属性时，如果它是元素。当 'font-weight' 组件设置为相对值 'bolder' 和 'lighter' 时，这些必须相对于 计算值 解释 'font-weight' 属性的 字体样式源对象 在设置属性时，如果它是元素。如果 计算值 在特定情况下未定义（例如，因为 字体样式源对象 不是元素或没有 被渲染），则相对关键字必须相对于正常字重 10px sans-serif 默认值进行解释。
textAlign IDL 属性在获取时，必须返回当前值。在设置时，当前值必须更改为新值。当实现 CanvasTextDrawingStyles 接口的对象被创建时， textAlign 属性最初必须具有值 start。
textBaseline IDL 属性在获取时，必须返回当前值。在设置时，当前值必须更改为新值。当实现 CanvasTextDrawingStyles 接口的对象被创建时， textBaseline 属性最初必须具有值 alphabetic。
direction IDL 属性在获取时，必须返回当前值。在设置时，当前值必须更改为新值。当实现 CanvasTextDrawingStyles 接口的对象被创建时， direction 属性最初必须具有值 "inherit"。
实现 CanvasTextDrawingStyles 接口的对象具有控制字母和单词之间间距的属性。此类对象具有关联的 字母间距 和 单词间距 值，它们是 CSS <length> 值。最初，两者都必须是 解析 "0px" 作为 CSS <length> 的结果。
CanvasRenderingContext2D/letterSpacing
仅在一个引擎中支持。
letterSpacing 获取步骤是返回 this 的 字母间距 的 序列化形式。
letterSpacing 设置步骤是
CanvasRenderingContext2D/wordSpacing
仅在一个引擎中支持。
wordSpacing 获取器 的步骤是返回 序列化形式 的 this 的 字间距。
wordSpacing 设置器
CanvasRenderingContext2D/fontKerning
fontKerning IDL 属性，在获取时，必须返回当前值。在设置时，必须将当前值更改为新值。当实现 CanvasTextDrawingStyles 接口的对象被创建时，fontKerning 属性必须最初具有值 "auto"。
CanvasRenderingContext2D/fontStretch
仅在一个引擎中支持。
fontStretch IDL 属性，在获取时，必须返回当前值。在设置时，必须将当前值更改为新值。当实现 CanvasTextDrawingStyles 接口的对象被创建时，fontStretch 属性必须最初具有值 "normal"。
CanvasRenderingContext2D/fontVariantCaps
仅在一个引擎中支持。
fontVariantCaps IDL 属性，在获取时，必须返回当前值。在设置时，必须将当前值更改为新值。当实现 CanvasTextDrawingStyles 接口的对象被创建时，fontVariantCaps 属性必须最初具有值 "normal"。
CanvasRenderingContext2D/textRendering
仅在一个引擎中支持。
textRendering IDL 属性，在获取时，必须返回当前值。在设置时，必须将当前值更改为新值。当实现 CanvasTextDrawingStyles 接口的对象被创建时，textRendering 属性必须最初具有值 "auto"。
textAlign 属性 允许的关键字如下
start
与文本的起始边对齐（在从左到右的文本中为左侧，在从右到左的文本中为右侧）。
end
与文本的结束边对齐（在从左到右的文本中为右侧，在从右到左的文本中为左侧）。
left
与左侧对齐。
right
与右侧对齐。
center
与中心对齐。
textBaseline 属性 允许的关键字对应于字体中的对齐点
关键字映射到以下对齐点
top
hanging
middle
alphabetic
ideographic
bottom
direction 属性 允许的关键字如下
fontKerning 属性 允许的关键字如下
auto
字距调整由用户代理自行决定。
normal
应用字距调整。
none
不应用字距调整。
fontStretch 属性 允许的关键字如下
ultra-condensed
与 CSS 'font-stretch' 'ultra-condensed' 设置相同。
extra-condensed
与 CSS 'font-stretch' 'extra-condensed' 设置相同。
condensed
与 CSS 'font-stretch' 'condensed' 设置相同。
semi-condensed
与 CSS 'font-stretch' 'semi-condensed' 设置相同。
normal
默认设置，字形宽度为 100%。
semi-expanded
与 CSS 'font-stretch' 'semi-expanded' 设置相同。
expanded
与 CSS 'font-stretch' 'expanded' 设置相同。
extra-expanded
与 CSS 'font-stretch' 'extra-expanded' 设置相同。
ultra-expanded
与 CSS 'font-stretch' 'ultra-expanded' 设置相同。
fontVariantCaps 属性 允许的关键字如下
normal
下面列出的功能均未启用。
small-caps
与 CSS 'font-variant-caps' 'small-caps' 设置相同。
all-small-caps
与 CSS 'font-variant-caps' 'all-small-caps' 设置相同。
petite-caps
与 CSS 'font-variant-caps' 'petite-caps' 设置相同。
all-petite-caps
与 CSS 'font-variant-caps' 'all-petite-caps' 设置相同。
unicase
与 CSS 'font-variant-caps' 'unicase' 设置相同。
titling-caps
与 CSS 'font-variant-caps' 'titling-caps' 设置相同。
textRendering 属性 允许的关键字如下
auto
与 SVG text-rendering 属性中的 'auto' 相同。
optimizeSpeed
与 SVG text-rendering 属性中的 'optimizeSpeed' 相同。
optimizeLegibility
与 SVG text-rendering 属性中的 'optimizeLegibility' 相同。
geometricPrecision
与 SVG text-rendering 属性中的 'geometricPrecision' 相同。
文本准备算法 如下所示。它将字符串 text、CanvasTextDrawingStyles 对象 target 和可选长度 maxWidth 作为输入。它返回一个字形形状数组，每个形状都定位在公共坐标空间上，一个 物理对齐，其值为 left、right 和 center 之一，以及一个 内联框。（此算法的大多数调用者都忽略了 物理对齐 和 内联框。）
如果提供了 maxWidth，但它小于或等于零，或等于 NaN，则返回一个空数组。
将 text 中的所有 ASCII 空白符 替换为 U+0020 SPACE 字符。
设 font 为 target 的当前字体，如该对象的 font 属性所指定。
从以下列表中应用适当的步骤以确定 direction 的值
形成一个假设的无限宽的 CSS 行框，其中包含一个 内联框，其中包含文本 text，其 CSS 属性设置为如下
| 属性 | 来源 |
|---|---|
| 'direction' | direction |
| 'font' | font |
| 'font-kerning' | target 的 fontKerning |
| 'font-stretch' | target 的 fontStretch |
| 'font-variant-caps' | target 的 fontVariantCaps |
| 'letter-spacing' | target 的 字母间距 |
| SVG text-rendering | target 的 textRendering |
| 'white-space' | 'pre' |
| 'word-spacing' | target 的 单词间距 |
以及所有其他属性设置为它们的初始值。
如果提供了 maxWidth 并且假设的 内联框 在假设的 行框 中的宽度大于 maxWidth CSS 像素，则更改 font 以具有更紧凑的字体（如果可用，或者如果可以通过将水平缩放因子应用于字体来合成一个合理可读的字体），或者使用更小的字体，并返回到上一步。
锚点 是 内联框 上的一个点，而 物理对齐 是 left、right 和 center 之一的值。这些变量由 textAlign 和 textBaseline 值确定，如下所示
水平位置
textAlign 是 lefttextAlign 是 start 并且 direction 是 'ltr'textAlign 是 end 并且 direction 是 'rtl'textAlign 是 righttextAlign 是 end 并且 direction 是 'ltr'textAlign 是 start 并且 direction 是 'rtl'textAlign 是 center垂直位置
textBaseline 是 toptextBaseline 是 hangingtextBaseline 是 middletextBaseline 是 alphabetictextBaseline 是 ideographictextBaseline 是 bottom令 result 为一个数组，通过从左到右（如果有）遍历 内联框 中的每个字形来构造，将每个字形的形状添加到数组中，如它在 内联框 中一样，使用以 CSS 像素 为单位的坐标空间，其原点位于 锚点。
返回 result、物理对齐 和内联框。
实现 CanvasPath 接口的对象具有一个 路径。 路径 具有一个零个或多个子路径的列表。每个子路径包含一个或多个点的列表，由直线或曲线 线段 连接，以及一个指示子路径是否关闭的标志。闭合的子路径是指子路径的最后一个点与子路径的第一个点通过直线连接的子路径。在绘制路径时，只包含一个点的子路径将被忽略。
路径 具有 需要新的子路径 标志。当此标志设置时，某些 API 会创建一个新的子路径，而不是扩展先前的子路径。当创建 路径 时，其 需要新的子路径 标志必须设置。
当创建实现 CanvasPath 接口的对象时，其 路径 必须初始化为零个子路径。
context.moveTo(x, y)CanvasRenderingContext2D/moveTo
在所有当前引擎中都受支持。
path.moveTo(x, y)使用给定点创建一个新的子路径。
context.closePath()CanvasRenderingContext2D/closePath
在所有当前引擎中都受支持。
path.closePath()将当前子路径标记为闭合，并使用与新闭合子路径的开始和结束相同的点启动一个新的子路径。
context.lineTo(x, y)CanvasRenderingContext2D/lineTo
在所有当前引擎中都受支持。
path.lineTo(x, y)将给定点添加到当前子路径，通过直线连接到前一个点。
context.quadraticCurveTo(cpx, cpy, x, y)CanvasRenderingContext2D/quadraticCurveTo
在所有当前引擎中都受支持。
path.quadraticCurveTo(cpx, cpy, x, y)将给定点添加到当前子路径，通过使用给定控制点的二次贝塞尔曲线连接到前一个点。
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)CanvasRenderingContext2D/bezierCurveTo
在所有当前引擎中都受支持。
path.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)将给定点添加到当前子路径，通过使用给定控制点的三次贝塞尔曲线连接到前一个点。
context.arcTo(x1, y1, x2, y2, radius)CanvasRenderingContext2D/arcTo
在所有当前引擎中都受支持。
path.arcTo(x1, y1, x2, y2, radius)将使用给定控制点和半径的圆弧添加到当前子路径，通过直线连接到前一个点。
如果给定的半径为负数，则抛出 "IndexSizeError" DOMException。
context.arc(x, y, radius, startAngle, endAngle [, counterclockwise ])在所有当前引擎中都受支持。
path.arc(x, y, radius, startAngle, endAngle [, counterclockwise ])在路径上添加点，使得由参数描述的圆周所描述的弧，从给定的起始角度开始，到给定的结束角度结束，以给定的方向（默认为顺时针）添加到路径，并通过直线连接到前一个点。
如果给定的半径为负数，则抛出 "IndexSizeError" DOMException。
context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, counterclockwise])CanvasRenderingContext2D/ellipse
在所有当前引擎中都受支持。
path.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, counterclockwise])在路径上添加点，使得由参数描述的椭圆周所描述的弧，从给定的起始角度开始，到给定的结束角度结束，以给定的方向（默认为顺时针）添加到路径，并通过直线连接到前一个点。
如果给定的半径为负数，则抛出 "IndexSizeError" DOMException。
context.rect(x, y, w, h)在所有当前引擎中都受支持。
path.rect(x, y, w, h)在路径上添加一个新的封闭子路径，表示给定的矩形。
context.roundRect(x, y, w, h, radii)path.roundRect(x, y, w, h, radii)在路径上添加一个新的封闭子路径，表示给定的圆角矩形。 radii 是一个圆角列表，或者一个表示矩形角的单个圆角，单位为像素。如果提供列表，则这些圆角的数量和顺序与 CSS 'border-radius' 属性中的数量和顺序相同。单个圆角的行为与具有单个元素的列表相同。
如果 w 和 h 都大于等于 0，或者都小于 0，则路径按顺时针绘制。否则，按逆时针绘制。
当 w 为负数时，圆角矩形水平翻转，这意味着通常应用于左角的圆角值将应用于右角，反之亦然。类似地，当 h 为负数时，圆角矩形垂直翻转。
当 radii 中的某个值 r 为一个数字时，相应的角将以 r 为半径的圆弧绘制。
当 radii 中的某个值 r 为一个具有 { x, y } 属性的对象时，相应的角将以椭圆弧绘制，其 x 和 y 半径分别等于 r.x 和 r.y。
当同一边的两个角的 radii 之和大于边的长度时，圆角矩形的 radii 将按长度 / (r1 + r2) 的比例进行缩放。如果多条边具有此属性，则使用比例因子最小的边的比例因子。这与 CSS 的行为一致。
如果 radii 是一个大小不是 1、2、3 或 4 的列表，则抛出 RangeError。
如果 radii 中的值是一个负数，或者是一个 { x, y } 对象，其 x 或 y 属性是负数，则抛出 RangeError。
以下方法允许作者操作实现 CanvasPath 接口的对象的 路径。
对于实现 CanvasDrawPath 和 CanvasTransform 接口的对象，传递给方法的点以及这些方法添加到 当前默认路径 的结果线，必须根据 当前变换矩阵 进行变换，然后才能添加到路径中。
当调用 moveTo(x, y) 方法时，必须执行以下步骤：
如果任何参数是无穷大或 NaN，则返回。
创建一个新的子路径，其第一个（也是唯一一个）点是指定的点。
当用户代理需要为 路径 上的坐标 (x, y) 确保存在子路径 时，用户代理必须检查 路径 的 需要新子路径 标志是否设置。如果设置了，则用户代理必须创建一个新的子路径，其第一个（也是唯一一个）点是点 (x, y)，就像调用了 moveTo() 方法一样，然后必须取消设置 路径 的 需要新子路径 标志。
当调用 closePath() 方法时，如果对象路径没有子路径，则不执行任何操作。否则，它必须将最后一个子路径标记为封闭，创建一个新的子路径，其第一个点与前一个子路径的第一个点相同，最后将这个新的子路径添加到路径中。
如果最后一个子路径的点列表中有多个点，则这等效于添加一条连接最后一个点到最后一个子路径的第一个点的直线，从而“关闭”子路径。
使用下面描述的方法将新点和连接它们的线添加到子路径中。在所有情况下，方法只修改对象路径中的最后一个子路径。
当调用 lineTo(x, y) 方法时，必须执行以下步骤：
如果任何参数是无穷大或 NaN，则返回。
如果对象的路径没有子路径，则为 (x, y) 确保存在子路径。
否则，使用一条直线连接子路径中的最后一个点到给定的点 (x, y)，然后将给定的点 (x, y) 添加到子路径中。
当调用 quadraticCurveTo(cpx, cpy, x, y) 方法时，必须执行以下步骤：
如果任何参数是无穷大或 NaN，则返回。
为 (cpx, cpy) 确保存在子路径。
使用控制点 (cpx, cpy) 的二次贝塞尔曲线连接子路径中的最后一个点到给定的点 (x, y)。 [BEZIER]
将给定的点 (x, y) 添加到子路径中。
当调用 bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 方法时，必须执行以下步骤：
如果任何参数是无穷大或 NaN，则返回。
为 (cp1x, cp1y) 确保存在子路径。
使用控制点 (cp1x, cp1y) 和 (cp2x, cp2y) 的三次贝塞尔曲线连接子路径中的最后一个点到给定的点 (x, y)。 [BEZIER]
将点 (x, y) 添加到子路径中。
当调用 arcTo(x1, y1, x2, y2, radius) 方法时，必须执行以下步骤：
如果任何参数是无穷大或 NaN，则返回。
为 (x1, y1) 确保存在子路径。
如果 radius 为负数，则抛出 "IndexSizeError" DOMException。
令点 (x0, y0) 为子路径中的最后一个点，经由 当前变换矩阵 的逆变换（使其与传递给方法的点处于相同的坐标系中）。
如果点 (x0, y0) 等于点 (x1, y1)，或者点 (x1, y1) 等于点 (x2, y2)，或者 radius 为零，则将点 (x1, y1) 添加到子路径中，并通过一条直线连接该点到前一个点 (x0, y0)。
否则，如果点 (x0, y0)、(x1, y1) 和 (x2, y2) 都位于同一条直线上，则将点 (x1, y1) 添加到子路径中，并通过一条直线连接该点到前一个点 (x0, y0)。
否则，令 The Arc 为具有半径 radius 的圆的圆周所给出的最短弧，该圆具有一个点与穿过点 (x0, y0) 并以点 (x1, y1) 结束的半无限线相切，并且具有一个不同点与以点 (x1, y1) 结束并穿过点 (x2, y2) 的半无限线相切。圆与这两条线接触的点分别称为起始切点和结束切点。通过一条直线连接点 (x0, y0) 到起始切点，将起始切点添加到子路径中，然后通过 The Arc 连接起始切点到结束切点，将结束切点添加到子路径中。
当调用 arc(x, y, radius, startAngle, endAngle, counterclockwise) 方法时，必须使用 this、x、y、radius、radius、0、startAngle、endAngle 和 counterclockwise 执行 椭圆方法步骤。
这使其等效于 ellipse()，除了两个半径相等且 rotation 为 0。
当调用 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) 方法时，必须使用 this、x、y、radiusX、radiusY、rotation、startAngle、endAngle 和 counterclockwise 执行 椭圆方法步骤。
给定 ellipse 和 angle，确定椭圆上的点步骤 为：
令 eccentricCircle 为与 ellipse 共享原点的圆，其半径等于 ellipse 的长半轴。
设 outerPoint 为 eccentricCircle 圆周上位于 angle 处的点，angle 是以弧度为单位从 ellipse 的半长轴顺时针测量的。
设 chord 为垂直于 ellipse 长轴的线段，它连接该轴和 outerPoint。
返回 chord 上与 ellipse 圆周相交的点。
给定 canvasPath、x、y、radiusX、radiusY、rotation、startAngle、endAngle 和 counterclockwise，椭圆方法步骤 为
如果任何参数是无穷大或 NaN，则返回。
如果 radiusX 或 radiusY 为负数，则抛出一个 "IndexSizeError" DOMException。
如果 canvasPath 的路径有任何子路径，则从子路径的最后一个点到圆弧的起点添加一条直线。
将圆弧的起点和终点添加到子路径中，并将它们用圆弧连接起来。圆弧及其起点和终点定义如下
考虑一个原点在 (x, y) 处，长半轴半径为 radiusX，短半轴半径为 radiusY，并且绕其原点旋转的椭圆，使得它的长半轴与 x 轴成 rotation 弧度的顺时针倾斜角度。
如果 counterclockwise 为 false 并且 endAngle − startAngle 大于或等于 2π，或者，如果 counterclockwise 为 true 并且 startAngle − endAngle 大于或等于 2π，那么圆弧为该椭圆的整个圆周，并且起点和终点都是运行 确定椭圆上点步骤（给定该椭圆和 startAngle）的结果。
否则，起点是运行 确定椭圆上点步骤（给定该椭圆和 startAngle）的结果，终点是运行 确定椭圆上点步骤（给定该椭圆和 endAngle）的结果，圆弧是沿该椭圆圆周从起点到终点的路径，如果 counterclockwise 为 true，则逆时针方向，否则为顺时针方向。由于这些点位于椭圆上，而不是仅仅是相对于零的角度，所以圆弧永远不能覆盖大于 2π 弧度的角度。
即使圆弧覆盖了椭圆的整个圆周，并且子路径中没有其他点，除非适当调用 closePath() 方法，否则路径不会闭合。
当调用 rect(x, y, w, h) 方法时，必须执行以下步骤
如果任何参数是无穷大或 NaN，则返回。
创建一个新的子路径，它仅包含四个点 (x, y)、(x+w, y)、(x+w, y+h)、(x, y+h)，按此顺序，这四个点由直线连接。
将子路径标记为闭合。
创建一个新的子路径，其中点 (x, y) 是子路径中唯一的点。
CanvasRenderingContext2D/roundRect
在所有当前引擎中都受支持。
roundRect(x, y, w, h, radii) 方法的步骤为
如果 x、y、w 或 h 中的任何一个为无限或 NaN，则返回。
如果 radii 是一个 无限制双精度浮点数 或 DOMPointInit，则将 radii 设置为 « radii »。
如果 radii 不是大小为 1、2、3 或 4 的列表，则抛出一个 RangeError。
设 normalizedRadii 为一个空列表。
对于 radii 中的每个 radius
如果 radius 是一个 DOMPointInit
如果 radius["x"] 或 radius["y"] 为负数，则抛出一个 RangeError。
否则，将 radius 附加到 normalizedRadii。
如果 radius 是一个 无限制双精度浮点数
如果 radius 为无限或 NaN，则返回。
如果 radius 为负数，则抛出一个 RangeError。
设 upperLeft、upperRight、lowerRight 和 lowerLeft 为 null。
如果 normalizedRadii 的大小为 4，则将 upperLeft 设置为 normalizedRadii[0]，将 upperRight 设置为 normalizedRadii[1]，将 lowerRight 设置为 normalizedRadii[2]，并将 lowerLeft 设置为 normalizedRadii[3]。
如果 normalizedRadii 的大小为 3，则将 upperLeft 设置为 normalizedRadii[0]，将 upperRight 和 lowerLeft 设置为 normalizedRadii[1]，并将 lowerRight 设置为 normalizedRadii[2]。
如果 normalizedRadii 的大小为 2，则将 upperLeft 和 lowerRight 设置为 normalizedRadii[0]，并将 upperRight 和 lowerLeft 设置为 normalizedRadii[1]。
如果 normalizedRadii 的大小为 1，则将 upperLeft、upperRight、lowerRight 和 lowerLeft 设置为 normalizedRadii[0]。
角落曲线不能重叠。缩放所有半径以防止这种情况
创建一个新的子路径
移动到点 (x + upperLeft["x"], y)。
画一条直线到点 (x + w − upperRight["x"], y)。
画一条圆弧到点 (x + w, y + upperRight["y"])。
画一条直线到点 (x + w, y + h − lowerRight["y"])。
画一条圆弧到点 (x + w − lowerRight["x"], y + h)。
画一条直线到点 (x + lowerLeft["x"], y + h)。
画一条圆弧到点 (x, y + h − lowerLeft["y"])。
画一条直线到点 (x, y + upperLeft["y"])。
画一条圆弧到点 (x + upperLeft["x"], y)。
将子路径标记为闭合。
创建一个新的子路径，其中点 (x, y) 是子路径中唯一的点。
这旨在与 CSS 的 'border-radius' 属性类似。
Path2D 对象在所有当前引擎中都受支持。
Path2D 对象可以用来声明路径，这些路径随后将用于实现 CanvasDrawPath 接口的对象。除了前面几节中描述的许多 API 之外，Path2D 对象还具有用来组合路径和将文本添加到路径的方法。
path = new Path2D()在所有当前引擎中都受支持。
创建一个新的空 Path2D 对象。
path = new Path2D(path)当 path 是一个 Path2D 对象时，返回一个副本。
当 path 是一个字符串时，创建由参数描述的路径，该参数被解释为 SVG 路径数据。 [SVG]
path.addPath(path [, transform ])在所有当前引擎中都受支持。
将参数给出的路径添加到路径中。
当调用 Path2D(path) 构造函数时，必须执行以下步骤
设 output 为一个新的 Path2D 对象。
如果未给出 path，则返回 output。
如果 path 是一个 Path2D 对象，则将 path 的所有子路径添加到 output 并返回 output。（换句话说，它返回参数的副本。）
设 svgPath 为根据 SVG 2 的路径数据规则解析和解释 path 的结果。 [SVG]
生成的路径可能为空。SVG 定义了用于解析和应用路径数据的错误处理规则。
令 (x, y) 为 svgPath 中的最后一个点。
将 svgPath 中的所有子路径（如果有）添加到 output 中。
在 output 中创建一个新的子路径，其中 (x, y) 是子路径中唯一的点。
返回 output。
当在 Path2D 对象 a 上调用时，addPath(path, transform) 方法必须执行以下步骤
如果 Path2D 对象 path 没有子路径，则返回。
令 matrix 为 从 2D 字典 transform 中创建 DOMMatrix 的结果。
如果 matrix 的一个或多个 m11 元素、m12 元素、m21 元素、m22 元素、m41 元素 或 m42 元素 为无穷大或 NaN，则返回。
创建 path 中所有子路径的副本。将此副本称为 c。
通过变换矩阵 matrix 变换 c 中的所有坐标和线。
令 (x, y) 为 c 中最后一个子路径中的最后一个点。
将 c 中的所有子路径添加到 a 中。
在 a 中创建一个新的子路径，其中 (x, y) 是子路径中唯一的点。
实现 CanvasTransform 接口的对象具有 当前变换矩阵，以及用于操纵它的方法（在本节中描述）。当创建实现 CanvasTransform 接口的对象时，其变换矩阵必须初始化为单位矩阵。
当创建 当前默认路径 时，以及在实现 CanvasTransform 接口的对象上绘制文本、形状和 Path2D 对象时，会将 当前变换矩阵 应用于坐标。
变换必须以相反的顺序执行。
例如，如果将一个将宽度加倍的缩放变换应用于画布，然后将一个将绘图操作旋转四分之一圈的旋转变换应用于画布，然后在画布上绘制一个宽度是高度两倍的矩形，则实际结果将是一个正方形。
context.scale(x, y)CanvasRenderingContext2D/scale
在所有当前引擎中都受支持。
将 当前变换矩阵 更改为应用具有给定特征的缩放变换。
context.rotate(angle)CanvasRenderingContext2D/rotate
在所有当前引擎中都受支持。
将 当前变换矩阵 更改为应用具有给定特征的旋转变换。角度以弧度表示。
context.translate(x, y)CanvasRenderingContext2D/translate
在所有当前引擎中都受支持。
将 当前变换矩阵 更改为应用具有给定特征的平移变换。
context.transform(a, b, c, d, e, f)CanvasRenderingContext2D/transform
在所有当前引擎中都受支持。
将 当前变换矩阵 更改为应用由参数给出的矩阵，如下所述。
matrix = context.getTransform()CanvasRenderingContext2D/getTransform
在所有当前引擎中都受支持。
context.setTransform(a, b, c, d, e, f)CanvasRenderingContext2D/setTransform
在所有当前引擎中都受支持。
将 当前变换矩阵 更改 为 由参数给出的矩阵，如下所述。
context.setTransform(transform)将 当前变换矩阵 更改 为 由传入的 DOMMatrix2DInit 字典表示的矩阵。
context.resetTransform()CanvasRenderingContext2D/resetTransform
在所有当前引擎中都受支持。
将 当前变换矩阵 更改为单位矩阵。
当调用时，scale(x, y) 方法必须执行以下步骤
如果任何参数是无穷大或 NaN，则返回。
将参数描述的缩放变换添加到 当前变换矩阵 中。参数 x 表示水平方向的缩放因子，参数 y 表示垂直方向的缩放因子。这些因子是倍数。
当调用时，rotate(angle) 方法必须执行以下步骤
如果 angle 为无穷大或 NaN，则返回。
将参数描述的旋转变换添加到 当前变换矩阵 中。参数 angle 表示以弧度表示的顺时针旋转角。
当调用时，translate(x, y) 方法必须执行以下步骤
如果任何参数是无穷大或 NaN，则返回。
将参数描述的平移变换添加到 当前变换矩阵 中。参数 x 表示水平方向的平移距离，参数 y 表示垂直方向的平移距离。参数以坐标空间单位表示。
当调用时，transform(a, b, c, d, e, f) 方法必须执行以下步骤
参数 a、b、c、d、e 和 f 有时被称为 m11、m12、m21、m22、dx 和 dy 或 m11、m21、m12、m22、dx 和 dy。特别要注意第二和第三个参数 (b 和 c) 的顺序，因为它们的顺序在不同的 API 中不同，而且 API 有时使用 m12/m21 表示法，有时使用 m21/m12 表示法来表示这些位置。
当调用时，getTransform() 方法必须返回一个新创建的 DOMMatrix，表示上下文 当前变换矩阵 的副本。
此返回的对象不是实时的，因此更新它不会影响 当前变换矩阵，更新 当前变换矩阵 不会影响已经返回的 DOMMatrix。
当调用时，setTransform(a, b, c, d, e, f) 方法必须执行以下步骤
如果任何参数是无穷大或 NaN，则返回。
将 当前变换矩阵 重置为参数描述的矩阵
| a | c | e |
| b | d | f |
| 0 | 0 | 1 |
当调用时，setTransform(transform) 方法必须执行以下步骤
令 matrix 为 从 2D 字典 transform 中创建 DOMMatrix 的结果。
如果 matrix 的一个或多个 m11 元素、m12 元素、m21 元素、m22 元素、m41 元素 或 m42 元素 为无穷大或 NaN，则返回。
将 当前变换矩阵 重置为 matrix。
当调用时，resetTransform() 方法必须将 当前变换矩阵 重置为单位矩阵。
给定由 transform() 和 setTransform() 方法创建的矩阵形式，即
| a | c | e |
| b | d | f |
| 0 | 0 | 1 |
变换矩阵乘法后的结果变换坐标将为
xnew = a x + c y + e
ynew = b x + d y + f
CanvasDrawImage 和 CanvasFillStrokeStyles 接口上的一些方法接受联合类型 CanvasImageSource 作为参数。
此联合类型允许实现以下任何接口的对象用作图像源
HTMLOrSVGImageElement (img 或 SVG image 元素)HTMLVideoElement (video 元素)HTMLCanvasElement (canvas 元素)画布外画布图像位图视频帧尽管没有正式规定为这种形式，但预计SVG image元素的实现将几乎与img元素相同。也就是说，SVG image元素共享img元素的基本概念和特性。
可以使用其他几种表示图像的类型（包括ImageData）来创建ImageBitmap接口。
要检查image参数的可使用性（其中image是一个CanvasImageSource对象），请运行以下步骤
打开image
HTMLOrSVGImageElement如果image的当前请求的状态为损坏，则抛出"InvalidStateError" DOMException。
如果image不能完全解码，则返回bad。
HTMLVideoElement如果image的readyState属性为HAVE_NOTHING或HAVE_METADATA，则返回bad。
HTMLCanvasElement画布外画布如果image的水平尺寸或垂直尺寸等于零，则抛出"InvalidStateError" DOMException。
图像位图视频帧如果image的[[Detached]]内部插槽值设置为true，则抛出"InvalidStateError" DOMException。
返回good。
当CanvasImageSource对象表示一个HTMLOrSVGImageElement时，元素的图像必须用作源图像。
具体来说，当CanvasImageSource对象表示HTMLOrSVGImageElement中的动画图像时，用户代理必须使用动画的默认图像（格式定义的图像，当不支持动画或动画被禁用时使用），或者，如果没有这样的图像，在渲染CanvasRenderingContext2D API 的图像时，必须使用动画的第一帧。
当CanvasImageSource对象表示一个HTMLVideoElement时，在调用带有参数的方法时，必须使用当前播放位置处的帧作为渲染CanvasRenderingContext2D API 的图像时的源图像，源图像的尺寸必须是自然宽度和自然高度（即，在应用任何纵横比校正之后）。
当CanvasImageSource对象表示一个HTMLCanvasElement时，元素的位图必须用作源图像。
当CanvasImageSource对象表示一个正在渲染的元素，并且该元素已调整大小，则必须使用源图像的原始图像数据，而不是渲染后的图像（例如，在渲染CanvasRenderingContext2D API 的图像时，源元素上的width和height属性对对象的解释方式没有影响）。
当CanvasImageSource对象表示一个ImageBitmap时，对象的位图图像数据必须用作源图像。
当CanvasImageSource对象表示一个OffscreenCanvas时，对象的位图必须用作源图像。
当CanvasImageSource对象表示一个VideoFrame时，对象的像素数据必须用作源图像，源图像的尺寸必须是对象的[[display width]]和[[display height]]。
如果一个对象image不是源代码干净的，则在打开image的类型时
HTMLOrSVGImageElement
HTMLVideoElement
HTMLCanvasElement
图像位图
画布外画布
image的位图的源代码干净标志为false。
context.fillStyle [ = value ]CanvasRenderingContext2D/fillStyle
在所有当前引擎中都受支持。
返回用于填充形状的当前样式。
可以设置，以更改填充样式。
样式可以是包含 CSS 颜色的字符串，也可以是CanvasGradient或CanvasPattern对象。无效值将被忽略。
context.strokeStyle [ = value ]CanvasRenderingContext2D/strokeStyle
在所有当前引擎中都受支持。
返回用于描边形状的当前样式。
可以设置，以更改描边样式。
样式可以是包含 CSS 颜色的字符串，也可以是CanvasGradient或CanvasPattern对象。无效值将被忽略。
实现CanvasFillStrokeStyles接口的对象具有属性和方法（在本节中定义），这些属性和方法控制对象如何处理形状。
此类对象具有关联的填充样式和描边样式值，这些值可以是 CSS 颜色、CanvasPattern或CanvasGradient。最初，两者都必须是解析字符串“#000000”的结果。
当值为 CSS 颜色时，在用于在位图上绘制时，它不应受转换矩阵的影响。
当设置为CanvasPattern或CanvasGradient对象时，在赋值后对对象进行的更改会影响后续的描边或填充形状。
的fillStyle getter步骤如下
的fillStyle setter步骤如下
如果给定值为字符串，则
如果给定值为一个被标记为不是源代码干净的的CanvasPattern对象，则将this的源代码干净标志设置为false。
The strokeStyle getter 的步骤是
The strokeStyle setter 的步骤是
如果给定值为字符串，则
如果给定值是一个标记为 非原点清晰 的 CanvasPattern 对象，则将 this 的 原点清晰 标志设置为 false。
颜色的 序列化 是一个字符串，计算方法如下：如果它的 alpha 值等于 1.0，则该字符串为一个小写的六位十六进制值，以 "#" 字符（U+0023 NUMBER SIGN）开头，前两位数字表示红色分量，接下来的两位数字表示绿色分量，最后两位数字表示蓝色分量，数字为 ASCII 小写十六进制数字。否则，颜色值具有小于 1.0 的 alpha 值，并且该字符串为 CSS rgba() 函数表示法格式中的颜色值："rgba"（U+0072 U+0067 U+0062 U+0061）后面跟着一个 U+0028 LEFT PARENTHESIS、一个范围为 0-255 的十进制整数表示红色分量（使用 ASCII 数字，采用尽可能短的形式）、一个文字 U+002C COMMA 和 U+0020 SPACE、一个表示绿色分量的整数、一个逗号和一个空格、一个表示蓝色分量的整数、另一个逗号和空格、一个 U+0030 DIGIT ZERO，如果 alpha 值大于零，则添加一个 U+002E FULL STOP（表示小数点），如果 alpha 值大于零，则添加一个或多个 ASCII 数字 表示 alpha 的小数部分，最后添加一个 U+0029 RIGHT PARENTHESIS。用户代理必须以重新解析时 alpha 值的精度水平表达 alpha 值的小数部分（如果有），这样才能将该 alpha 值解释为相同的 alpha 值。
有三种类型的渐变：线性渐变、径向渐变和圆锥渐变，它们由实现不透明 CanvasGradient 接口的对象表示。
创建渐变后（见下文），会沿着渐变放置停止点以定义颜色在渐变中的分布方式。渐变在每个停止点的颜色是为该停止点指定的颜色。在每个停止点之间，颜色和 alpha 分量必须在 RGBA 空间内线性插值，而不将 alpha 值预乘以找到要使用在该偏移量的颜色。在第一个停止点之前，颜色必须是第一个停止点的颜色。在最后一个停止点之后，颜色必须是最后一个停止点的颜色。当没有停止点时，渐变为 透明黑色。
gradient.addColorStop(offset, color)在所有当前引擎中都受支持。
在给定偏移量的渐变上添加一个具有给定颜色的颜色停止点。0.0 是渐变一端的偏移量，1.0 是另一端的偏移量。
如果偏移量超出范围，则抛出 "IndexSizeError" DOMException。如果无法解析颜色，则抛出 "SyntaxError" DOMException。
gradient = context.createLinearGradient(x0, y0, x1, y1)CanvasRenderingContext2D/createLinearGradient
在所有当前引擎中都受支持。
返回一个 CanvasGradient 对象，该对象表示沿由参数表示的坐标给定的线绘制的线性渐变。
gradient = context.createRadialGradient(x0, y0, r0, x1, y1, r1)CanvasRenderingContext2D/createRadialGradient
在所有当前引擎中都受支持。
返回一个 CanvasGradient 对象，该对象表示沿由参数表示的圆圈给定的圆锥绘制的径向渐变。
如果两个半径中的任何一个为负数，则抛出 "IndexSizeError" DOMException 异常。
gradient = context.createConicGradient(startAngle, x, y)CanvasRenderingContext2D/createConicGradient
在所有当前引擎中都受支持。
返回一个 CanvasGradient 对象，该对象表示沿由参数表示的中心绕行的顺时针旋转绘制的圆锥渐变。
The addColorStop(offset, color) 方法在 CanvasGradient 上被调用时，必须运行以下步骤
如果 offset 小于 0 或大于 1，则抛出 "IndexSizeError" DOMException。
令 parsed color 为 解析 color 的结果。
没有元素传递给解析器，因为 CanvasGradient 对象是 canvas 中立的——一个由一个 canvas 创建的 CanvasGradient 对象可以被另一个 canvas 使用，因此在指定颜色时，无法知道哪个是“相关元素”。
如果 parsed color 为失败，则抛出 "SyntaxError" DOMException。
在渐变上放置一个新的停止点，该停止点相对于整个渐变的偏移量为 offset，颜色为 parsed color。
如果在渐变的相同偏移量上添加了多个停止点，则它们必须按添加顺序放置，第一个停止点最靠近渐变的起点，每个后续停止点都无限微小地更靠近终点（实际上会导致除每个点上添加的第一个和最后一个停止点之外的所有停止点被忽略）。
The createLinearGradient(x0, y0, x1, y1) 方法接受四个参数，表示渐变的起点 (x0, y0) 和终点 (x1, y1)。该方法被调用时，必须返回一个使用指定的线初始化的线性 CanvasGradient。
线性渐变必须以这样一种方式渲染，即垂直于穿过起点和终点的线的每条线上的所有点都具有这两条线交叉点的颜色（颜色来自上面描述的 插值和外推）。在渲染时，线性渐变中的点必须按照 当前变换矩阵 所描述的方式进行变换。
如果 x0 = x1 且 y0 = y1，则线性渐变必须不绘制任何内容。
The createRadialGradient(x0, y0, r0, x1, y1, r1) 方法接受六个参数，前三个参数表示起点 (x0, y0) 和半径为 r0 的起始圆圈，后三个参数表示起点 (x1, y1) 和半径为 r1 的结束圆圈。这些值以坐标空间单位表示。如果 r0 或 r1 中的任何一个为负数，则必须抛出 "IndexSizeError" DOMException。否则，该方法被调用时，必须返回使用指定的两个圆圈初始化的径向 CanvasGradient。
径向渐变必须通过遵循以下步骤来渲染
如果 x0 = x1 且 y0 = y1 且 r0 = r1，则径向渐变必须不绘制任何内容。返回。
令 x(ω) = (x1-x0)ω + x0
令 y(ω) = (y1-y0)ω + y0
令 r(ω) = (r1-r0)ω + r0
令 ω 处的颜色为渐变中该位置的颜色（颜色来自上面描述的 插值和外推）。
对于 r(ω) > 0 的所有 ω 值，从最靠近正无穷大的 ω 值开始，到最靠近负无穷大的 ω 值结束，绘制半径为 r(ω) 的圆圈的圆周，位置为 (x(ω), y(ω))，颜色为 ω 处的颜色，但仅在位图中尚未被此渲染步骤中更早的圆圈绘制过的部分上绘制。
这实际上创建了一个圆锥，该圆锥与渐变创建时定义的两个圆圈相切，圆锥在起始圆圈 (0.0) 之前部分使用第一个偏移量的颜色，圆锥在结束圆圈 (1.0) 之后部分使用最后一个偏移量的颜色，圆锥之外的区域不受渐变影响（透明黑色）。
然后，必须根据渲染时当前变换矩阵的描述对生成的径向渐变进行变换。
createConicGradient(startAngle, x, y)方法接受三个参数，第一个参数startAngle表示渐变开始的角度（以弧度为单位），最后两个参数(x, y)表示渐变的中心点（以CSS 像素为单位）。当调用该方法时，它必须返回一个以指定中心点和角度初始化的圆锥形CanvasGradient。
它遵循与 CSS 'conic-gradient'相同的渲染规则，等效于 CSS 'conic-gradient(from adjustedStartAnglerad at xpx ypx, angularColorStopList)'。这里
adjustedStartAngle 由 startAngle + π/2 给出；
angularColorStopList 由使用addColorStop()添加到CanvasGradient的颜色停顿时给出，颜色停顿偏移量被解释为百分比。
渐变只能在相关描边或填充效果要求绘制的地方绘制。
图案由实现不透明CanvasPattern接口的对象表示。
pattern = context.createPattern(image, repetition)CanvasRenderingContext2D/createPattern
在所有当前引擎中都受支持。
返回一个CanvasPattern对象，该对象使用给定的图像，并在由repetition参数给出的方向上重复。
repetition的允许值为repeat（两个方向）、repeat-x（仅水平方向）、repeat-y（仅垂直方向）和no-repeat（无方向）。如果repetition参数为空，则使用值repeat。
如果图像尚未完全解码，则不会绘制任何内容。如果图像是一个没有数据的画布，则会抛出一个"InvalidStateError"DOMException。
pattern.setTransform(transform)在所有当前引擎中都受支持。
设置在填充或描边绘画操作期间渲染图案时将使用的变换矩阵。
createPattern(image, repetition)方法在调用时，必须运行以下步骤
令usability为检查image的可使用性的结果。
如果usability为bad，则返回null。
断言：usability为good。
如果repetition为空字符串，则将其设置为"repeat"。
如果repetition与"repeat"、"repeat-x"、"repeat-y"或"no-repeat"中的任何一个相同，则抛出一个"SyntaxError"DOMException。
令pattern为一个新的CanvasPattern对象，其图像为image，重复行为由repetition给出。
如果image不是原点干净的，则将pattern标记为非原点干净的。
返回pattern。
在调用createPattern()方法后，修改创建CanvasPattern对象时使用的image不会影响由CanvasPattern对象渲染的图案。
图案具有一个变换矩阵，它控制图案在绘制时的使用方式。最初，图案的变换矩阵必须是单位矩阵。
setTransform(transform)方法在调用时，必须运行以下步骤
令matrix为从 2D 字典transform创建DOMMatrix的结果。
如果matrix的m11 元素、m12 元素、m21 元素、m22 元素、m41 元素或m42 元素中的一个或多个是无穷大或 NaN，则返回。
将图案的变换矩阵重置为matrix。
当图案要在某个区域内渲染时，用户代理必须运行以下步骤来确定渲染的内容
创建一个无限的透明黑色位图。
将图像的副本放置在位图上，使其左上角位于坐标空间的原点，每个坐标空间单位对应于图像的CSS 像素，然后如果重复行为为"repeat-x"，则水平向左和向右放置此图像的重复副本；如果重复行为为"repeat-y"，则垂直向上和向下放置此图像的重复副本；如果重复行为为"repeat"，则在位图的所有四个方向上放置此图像的重复副本。
如果原始图像数据是位图图像，则在重复区域中某一点绘制的值是通过对原始图像数据进行滤波计算得出的。当放大时，如果imageSmoothingEnabled属性设置为false，则图像必须使用最近邻插值渲染。否则，用户代理可以使用任何滤波算法（例如双线性插值或最近邻）。支持多种滤波算法的用户代理可以使用imageSmoothingQuality属性的值来指导滤波算法的选择。当此类滤波算法需要从原始图像数据之外获取像素值时，它必须使用将像素坐标包装到原始图像的尺寸中的值。（也就是说，无论图案的重复行为值是什么，滤波器都使用“重复”行为。）
根据图案的变换矩阵变换生成的位图。
再次变换生成的位图，这次根据当前变换矩阵进行变换。
用透明黑色替换图案要渲染的区域之外的图像的任何部分。
生成的位图是要渲染的内容，具有相同的原点和相同的比例。
如果在变换矩阵为奇异的情况下使用径向渐变或重复图案，则生成的样式必须为透明黑色（否则渐变或图案将被压缩成一个点或一条线，留下其他像素未定义）。即使变换矩阵为奇异，线性渐变和纯色也始终定义所有点。
实现CanvasRect接口的对象提供以下方法，用于立即将矩形绘制到位图上。每个方法都接受四个参数；前两个参数给出矩形左上角的x和y坐标，后两个参数分别给出矩形的宽度w和高度h。
必须将当前变换矩阵应用于以下四个坐标，它们构成必须闭合才能获得指定矩形的路径：(x, y)、(x+w, y)、(x+w, y+h)、(x, y+h)。
形状在不影响当前默认路径的情况下绘制，并受裁剪区域的影响，并且，除了clearRect()之外，还受阴影效果、全局 alpha和当前合成和混合运算符的影响。
context.clearRect(x, y, w, h)CanvasRenderingContext2D/clearRect
在所有当前引擎中都受支持。
将给定矩形中的位图上的所有像素清除为透明黑色。
context.fillRect(x, y, w, h)CanvasRenderingContext2D/fillRect
在所有当前引擎中都受支持。
使用当前填充样式将给定矩形绘制到位图上。
context.strokeRect(x, y, w, h)CanvasRenderingContext2D/strokeRect
在所有当前引擎中都受支持。
使用当前描边样式将给定矩形的轮廓框绘制到位图上。
clearRect(x, y, w, h)方法在调用时，必须运行以下步骤
如果高度或宽度为零，则此方法没有效果，因为像素集将为空。
fillRect(x, y, w, h)方法在调用时，必须运行以下步骤
strokeRect(x, y, w, h)方法在调用时，必须运行以下步骤
如果任何参数是无穷大或 NaN，则返回。
使用CanvasPathDrawingStyles接口的线样式获取下面描述的路径的跟踪结果，并使用this的描边样式进行填充。
如果 w 和 h 都为零，则路径只有一个子路径，只有一个点 (x, y)，没有线，因此此方法没有效果（追踪路径 算法在这种情况下返回一个空路径）。
如果 w 或 h 中只有一个为零，则路径只有一个子路径，包含两个点，坐标分别为 (x, y) 和 (x+w, y+h)，按此顺序，通过一条直线连接。
否则，路径只有一个子路径，包含四个点，坐标分别为 (x, y)，(x+w, y)，(x+w, y+h)，和 (x, y+h)，按此顺序通过直线相互连接。
在所有当前引擎中都受支持。
context.fillText(text, x, y [, maxWidth ])CanvasRenderingContext2D/fillText
在所有当前引擎中都受支持。
context.strokeText(text, x, y [, maxWidth ])CanvasRenderingContext2D/strokeText
在所有当前引擎中都受支持。
分别填充或描边给定位置的文本。如果提供了最大宽度，则文本将根据需要缩放以适合该宽度。
metrics = context.measureText(text)CanvasRenderingContext2D/measureText
在所有当前引擎中都受支持。
返回一个 TextMetrics 对象，其中包含当前字体中给定文本的度量。
metrics.width在所有当前引擎中都受支持。
metrics.actualBoundingBoxLeftTextMetrics/actualBoundingBoxLeft
在所有当前引擎中都受支持。
metrics.actualBoundingBoxRightTextMetrics/actualBoundingBoxRight
在所有当前引擎中都受支持。
metrics.fontBoundingBoxAscentTextMetrics/fontBoundingBoxAscent
在所有当前引擎中都受支持。
metrics.fontBoundingBoxDescentTextMetrics/fontBoundingBoxDescent
在所有当前引擎中都受支持。
metrics.actualBoundingBoxAscentTextMetrics/actualBoundingBoxAscent
在所有当前引擎中都受支持。
metrics.actualBoundingBoxDescentTextMetrics/actualBoundingBoxDescent
在所有当前引擎中都受支持。
metrics.emHeightAscent在所有当前引擎中都受支持。
metrics.emHeightDescent在所有当前引擎中都受支持。
metrics.hangingBaselinemetrics.alphabeticBaselineTextMetrics/alphabeticBaseline
metrics.ideographicBaselineTextMetrics/ideographicBaseline
返回下面描述的度量。
实现 CanvasText 接口的对象提供了以下方法来渲染文本。
使用 fillText(text, x, y, maxWidth) 和 strokeText(text, x, y, maxWidth) 方法渲染给定的 text 在给定的 (x, y) 坐标，确保文本宽度不超过 maxWidth（如果指定），使用当前 font，textAlign 和 textBaseline 值。具体来说，当调用这些方法时，用户代理必须运行以下步骤
如果任何参数是无穷大或 NaN，则返回。
运行 文本准备算法，将 text，实现 CanvasText 接口的对象，以及（如果提供了 maxWidth 参数）该参数传递给它。令 glyphs 为结果。
绘制 glyphs 中给定的形状，通过 当前变换矩阵 进行变换，glyphs 的坐标空间中的每个 CSS 像素 映射到一个坐标空间单位。
对于 fillText()，this 的 填充样式 必须应用于形状，而 this 的 描边样式 必须忽略。对于 strokeText()，情况相反：this 的 描边样式 必须应用于使用实现 CanvasText 接口的对象对形状进行 追踪 的结果，以用于线样式，而 this 的 填充样式 必须忽略。
这些形状绘制时不会影响当前路径，并受 阴影效果，全局 alpha，裁剪区域，以及 当前合成和混合运算符 的影响。
measureText(text) 方法的步骤是运行 文本准备算法，将 text 和实现 CanvasText 接口的对象传递给它，然后使用返回的 内联框 必须返回一个新的 TextMetrics 对象，其成员的行为如以下列表所述：[CSS]
width 属性actualBoundingBoxLeft 属性从 textAlign 属性给出的对齐点到给定文本的边界矩形的左侧的平行于基线的距离，以 CSS 像素 为单位；正数表示从给定对齐点向左的距离。
此值加上下一个值（actualBoundingBoxRight）可能比 内联框 的宽度（width）更宽，特别是在斜体字体中，字符会超出它们的推进宽度。
actualBoundingBoxRight 属性从 textAlign 属性给出的对齐点到给定文本的边界矩形的右侧的平行于基线的距离，以 CSS 像素 为单位；正数表示从给定对齐点向右的距离。
fontBoundingBoxAscent 属性从 textBaseline 属性指示的水平线到 升高度量 的距离 第一个可用字体，以 CSS 像素 为单位；正数表示从给定基线向上方的距离。
这个值和下一个值在渲染背景时很有用，即使渲染的文本发生变化，背景也必须保持一致的高度。 actualBoundingBoxAscent 属性（及其对应于下降的属性）在绘制特定文本的边界框时很有用。
fontBoundingBoxDescent 属性从由 textBaseline 属性指示的水平线到 下降度量 的距离，以 CSS 像素 为单位；正数表示从给定的基线向下延伸的距离。该距离是针对 第一个可用的字体 计算的。
actualBoundingBoxAscent 属性从由 textBaseline 属性指示的水平线到给定文本的包围矩形顶部的距离，以 CSS 像素 为单位；正数表示从给定的基线向上延伸的距离。
即使第一个指定的字体涵盖了输入文本中的所有字符，此数字也会根据输入文本而有很大差异。例如，从 字母基线 到一个小写字母“o”的 actualBoundingBoxAscent 将小于一个大写字母“F”。该值很容易为负；例如，当给定文本只是一个逗号“,”时，从 em 框的顶部 (textBaseline 值 "top") 到包围矩形的顶部的距离，可能（除非字体非常不寻常）为负。
actualBoundingBoxDescent 属性从由 textBaseline 属性指示的水平线到给定文本的包围矩形底部的距离，以 CSS 像素 为单位；正数表示从给定的基线向下延伸的距离。
emHeightAscent 属性从由 textBaseline 属性指示的水平线到 内联框 中 em 方块的最高顶部之间的距离，以 CSS 像素 为单位；正数表示给定的基线位于该 em 方块的顶部下方（因此该值通常为正）。如果给定的基线是该 em 方块的顶部，则为零；如果给定的基线是该 em 方块的中间，则为字体大小的一半。
emHeightDescent 属性从由 textBaseline 属性指示的水平线到 内联框 中 em 方块的最低底部之间的距离，以 CSS 像素 为单位；正数表示给定的基线位于该 em 方块的底部上方。（如果给定的基线是该 em 方块的底部，则为零。）
hangingBaseline 属性从由 textBaseline 属性指示的水平线到 内联框 的 悬挂基线 的距离，以 CSS 像素 为单位；正数表示给定的基线位于 悬挂基线 下方。（如果给定的基线是 悬挂基线，则为零。）
alphabeticBaseline 属性从由 textBaseline 属性指示的水平线到 内联框 的 字母基线 的距离，以 CSS 像素 为单位；正数表示给定的基线位于 字母基线 下方。（如果给定的基线是 字母基线，则为零。）
ideographicBaseline 属性从由 textBaseline 属性指示的水平线到 内联框 的 意识形态下基线 的距离，以 CSS 像素 为单位；正数表示给定的基线位于 意识形态下基线 下方。（如果给定的基线是 意识形态下基线，则为零。）
使用 fillText() 和 strokeText() 渲染的字形可能会溢出由字体大小（em 方块大小）和 measureText() 返回的宽度（文本宽度）给出的框。如果这是一个问题，作者建议使用上面描述的包围框值。
2D 上下文 API 的未来版本可能会提供一种将使用 CSS 渲染的文档片段直接渲染到画布上的方法。这将优于专门用于多行布局的方法。
实现 CanvasDrawPath 接口的对象具有 当前默认路径。只有一个 当前默认路径，它不是 绘图状态 的一部分。 当前默认路径 是一个 路径，如上所述。
context.beginPath()CanvasRenderingContext2D/beginPath
在所有当前引擎中都受支持。
重置 当前默认路径。
context.fill([ fillRule ])在所有当前引擎中都受支持。
context.fill(path [, fillRule ])使用当前填充样式填充 当前默认路径 或给定路径的子路径，遵循给定的填充规则。
context.stroke()CanvasRenderingContext2D/stroke
在所有当前引擎中都受支持。
context.stroke(path)使用当前描边样式描边 当前默认路径 或给定路径的子路径。
context.clip([ fillRule ])在所有当前引擎中都受支持。
context.clip(path [, fillRule ])使用给定的填充规则来确定路径中的哪些点，进一步将剪切区域约束到 当前默认路径 或给定路径。
context.isPointInPath(x, y [, fillRule ])CanvasRenderingContext2D/isPointInPath
在所有当前引擎中都受支持。
context.isPointInPath(path, x, y [, fillRule ])使用给定的填充规则来确定路径中的哪些点，如果给定的点位于 当前默认路径 或给定路径中，则返回 true。
context.isPointInStroke(x, y)CanvasRenderingContext2D/isPointInStroke
在所有当前引擎中都受支持。
context.isPointInStroke(path, x, y)如果给定的点位于 当前默认路径 或给定路径的描边覆盖区域中，则返回 true，该区域由当前描边样式确定。
beginPath() 方法的步骤是清空 this 的 当前默认路径 中的子路径列表，使其再次具有零个子路径。
在以下方法定义中，如果使用术语 预期路径 来表示 Path2D 或 null 的 path，则表示如果 path 是 Path2D 对象，则表示 path 本身，否则表示 当前默认路径。
当 预期路径 是 Path2D 对象时，其子路径的坐标和线条必须根据实现 CanvasTransform 接口的对象的 当前变换矩阵 进行变换，在这些方法使用时（不会影响 Path2D 对象本身）。当预期路径是 当前默认路径 时，它不受变换的影响。（这是因为在构建 当前默认路径 时，变换已经影响了它，因此在绘制时再次应用它会导致双重变换。）
fill(fillRule) 方法的步骤是运行 填充步骤，给定 this、null 和 fillRule。
fill(path, fillRule) 方法的步骤是运行 填充步骤，给定 this、path 和 fillRule。
给定一个 CanvasDrawPath context、一个 Path2D-or-null path 和一个 填充规则 fillRule，填充步骤 将使用 context 的 填充样式 填充 path 的 目标路径 的所有子路径，并使用 fillRule 指定的 填充规则。开放子路径在填充时必须被隐式闭合（不影响实际子路径）。
给定 this 和 null，stroke() 方法步骤将运行 描边步骤。
给定 this 和 path，stroke(path) 方法步骤将运行 描边步骤。
给定一个 CanvasDrawPath context 和一个 Path2D-or-null path，描边步骤 将使用 context 的线样式（由其 CanvasPathDrawingStyles 混合物设置）追踪 path 的 目标路径，然后使用 context 的 描边样式 填充结果路径，并使用 非零环绕规则。
由于 追踪路径 算法的定义方式，一次描边操作中路径的重叠部分将被视为其并集，并被绘制出来。
即使使用 当前默认路径，描边样式也会受到绘制过程中的变换的影响。
填充或描边路径时，必须在不影响 当前默认路径 或任何 Path2D 对象的情况下进行绘制，并且必须受到 阴影效果、全局 alpha、裁剪区域 和 当前合成和混合运算符 的影响。（变换的效果如上所述，并根据正在使用的路径而有所不同。）
给定 this、null 和 fillRule，clip(fillRule) 方法步骤将运行 裁剪步骤。
给定 this、path 和 fillRule，clip(path, fillRule) 方法步骤将运行 裁剪步骤。
给定一个 CanvasDrawPath context、一个 Path2D-or-null path 和一个 填充规则 fillRule，裁剪步骤 将通过计算 context 的当前裁剪区域与 path 的 目标路径 描述的区域的交集来创建一个新的 裁剪区域，并使用 fillRule 指定的 填充规则。开放子路径在计算裁剪区域时必须被隐式闭合，不影响实际子路径。新的裁剪区域将替换当前裁剪区域。
当上下文被初始化时，其当前裁剪区域必须被设置为最大的无限表面（即，默认情况下，不进行裁剪）。
给定 this、null、x、y 和 fillRule，isPointInPath(x, y, fillRule) 方法步骤将返回 点在路径内步骤 的结果。
给定 this、path、x、y 和 fillRule，isPointInPath(path, x, y, fillRule) 方法步骤将返回 点在路径内步骤 的结果。
给定一个 CanvasDrawPath context、一个 Path2D-or-null path、两个数字 x 和 y 以及一个 填充规则 fillRule，点在路径内步骤 将
如果 x 或 y 是无穷大或 NaN，则返回 false。
如果由 x 和 y 坐标给定的点（在不受当前变换影响的画布坐标空间中作为坐标处理）位于 path 的 目标路径 内部（由 fillRule 指定的 填充规则 确定），则返回 true。开放子路径在计算路径内部区域时必须被隐式闭合，不影响实际子路径。路径上的点必须被视为在路径内部。
返回 false。
给定 this、null、x 和 y，isPointInStroke(x, y) 方法步骤将返回 点在描边内步骤 的结果。
给定 this、path、x 和 y，isPointInStroke(path, x, y) 方法步骤将返回 点在描边内步骤 的结果。
给定一个 CanvasDrawPath context、一个 Path2D-or-null path 以及两个数字 x 和 y，点在描边内步骤 将
如果 x 或 y 是无穷大或 NaN，则返回 false。
如果由 x 和 y 坐标给定的点（在不受当前变换影响的画布坐标空间中作为坐标处理）位于 path 的 目标路径 的描边路径内部（使用 context 的线样式（由其 CanvasPathDrawingStyles 混合物设置）追踪，使用 非零环绕规则），则返回 true。描边路径上的点必须被视为在路径内部。
返回 false。
这个 canvas 元素有几个复选框。与路径相关的命令将被突出显示
< canvas height = 400 width = 750 >
< label >< input type = checkbox id = showA > Show As</ label >
< label >< input type = checkbox id = showB > Show Bs</ label >
<!-- ... -->
</ canvas >
< script >
function drawCheckbox( context, element, x, y, paint) {
context. save();
context. font = '10px sans-serif' ;
context. textAlign = 'left' ;
context. textBaseline = 'middle' ;
var metrics = context. measureText( element. labels[ 0 ]. textContent);
if ( paint) {
context. beginPath();
context. strokeStyle = 'black' ;
context. rect( x- 5 , y- 5 , 10 , 10 );
context. stroke();
if ( element. checked) {
context. fillStyle = 'black' ;
context. fill();
}
context. fillText( element. labels[ 0 ]. textContent, x+ 5 , y);
}
context. beginPath();
context. rect( x- 7 , y- 7 , 12 + metrics. width+ 2 , 14 );
context. drawFocusIfNeeded( element);
context. restore();
}
function drawBase() { /* ... */ }
function drawAs() { /* ... */ }
function drawBs() { /* ... */ }
function redraw() {
var canvas = document. getElementsByTagName( 'canvas' )[ 0 ];
var context = canvas. getContext( '2d' );
context. clearRect( 0 , 0 , canvas. width, canvas. height);
drawCheckbox( context, document. getElementById( 'showA' ), 20 , 40 , true );
drawCheckbox( context, document. getElementById( 'showB' ), 20 , 60 , true );
drawBase();
if ( document. getElementById( 'showA' ). checked)
drawAs();
if ( document. getElementById( 'showB' ). checked)
drawBs();
}
function processClick( event) {
var canvas = document. getElementsByTagName( 'canvas' )[ 0 ];
var context = canvas. getContext( '2d' );
var x = event. clientX;
var y = event. clientY;
var node = event. target;
while ( node) {
x -= node. offsetLeft - node. scrollLeft;
y -= node. offsetTop - node. scrollTop;
node = node. offsetParent;
}
drawCheckbox( context, document. getElementById( 'showA' ), 20 , 40 , false );
if ( context. isPointInPath( x, y) )
document. getElementById( 'showA' ). checked = ! ( document. getElementById( 'showA' ). checked);
drawCheckbox( context, document. getElementById( 'showB' ), 20 , 60 , false );
if ( context. isPointInPath( x, y) )
document. getElementById( 'showB' ). checked = ! ( document. getElementById( 'showB' ). checked);
redraw();
}
document. getElementsByTagName( 'canvas' )[ 0 ]. addEventListener( 'focus' , redraw, true );
document. getElementsByTagName( 'canvas' )[ 0 ]. addEventListener( 'blur' , redraw, true );
document. getElementsByTagName( 'canvas' )[ 0 ]. addEventListener( 'change' , redraw, true );
document. getElementsByTagName( 'canvas' )[ 0 ]. addEventListener( 'click' , processClick, false );
redraw();
</ script > context.drawFocusIfNeeded(element)CanvasRenderingContext2D/drawFocusIfNeeded
在所有当前引擎中都受支持。
context.drawFocusIfNeeded(path, element)如果 element 被 聚焦，则围绕 path 绘制焦点环，遵循焦点环的平台约定。
实现 CanvasUserInterface 接口的对象提供以下方法来绘制焦点环。
给定 this、element 和 this 的 当前默认路径，drawFocusIfNeeded(element) 方法步骤将 根据需要绘制焦点。
给定 this、element 和 path，drawFocusIfNeeded(path, element) 方法步骤将 根据需要绘制焦点。
要 根据需要绘制焦点，给定一个实现 CanvasUserInterface 的对象 context、一个元素 element 和一个 路径 path
沿着 path 绘制具有适当样式的焦点环，遵循平台约定。
某些平台只围绕从键盘聚焦的元素绘制焦点环，而不围绕从鼠标聚焦的元素绘制焦点环。其他平台根本不围绕某些元素绘制焦点环，除非启用了相关的辅助功能。此 API 旨在遵循这些约定。实现基于元素聚焦方式的区分的用户代理应根据触发调用的用户交互事件类型（如果有）对由 focus() 方法驱动的聚焦进行分类。
焦点环不应受到 阴影效果、全局 alpha、当前合成和混合运算符、填充样式、描边样式 或 CanvasPathDrawingStyles、CanvasTextDrawingStyles 接口中的任何成员的影响，但应受到 裁剪区域 的影响。（变换的效果如上所述，并根据正在使用的路径而有所不同。）
用户代理在绘制焦点环时，不应隐式关闭预期路径中的开放子路径。
但是，这可能是一个无关紧要的问题。例如，如果焦点环绘制为围绕预期路径中点的轴对齐的边界矩形，则子路径是否关闭没有影响。本规范有意不具体说明焦点环的绘制方式：用户代理应遵循其平台的本机约定。
本节中使用的“通知用户”并不意味着任何持久状态更改。例如，它可能意味着调用系统辅助功能 API 来通知辅助技术（如放大工具），以便用户的放大镜移动到画布的指定区域。但是，它不会将路径与元素关联起来，也不会提供触觉反馈区域等等。
实现 CanvasDrawImage 接口的对象具有drawImage() 方法来绘制图像。
该方法可以使用三种不同的参数集调用
drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
context.drawImage(image, dx, dy)CanvasRenderingContext2D/drawImage
在所有当前引擎中都受支持。
context.drawImage(image, dx, dy, dw, dh)context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)将给定图像绘制到画布上。参数解释如下
如果图像尚未完全解码，则不绘制任何内容。如果图像是一个没有数据的画布，则抛出"InvalidStateError" DOMException。
当调用drawImage() 方法时，用户代理必须运行以下步骤
如果任何参数是无穷大或 NaN，则返回。
令usability 为检查 image 的可用性的结果。
如果usability 为bad，则返回（不绘制任何内容）。
按照以下步骤建立源矩形和目标矩形
如果没有指定，dw 和 dh 参数必须默认为 sw 和 sh 的值，解释为图像中的一个CSS 像素在输出位图的坐标空间中被视为一个单位。如果省略了 sx、sy、sw 和 sh 参数，则它们必须分别默认为 0、0、图像的自然宽度（以图像像素为单位）和图像的自然高度（以图像像素为单位）。如果图像没有自然尺寸，则必须使用具体对象大小，使用 CSS "具体对象大小解析" 算法确定，其中指定大小既没有确定宽度也没有确定高度，也没有任何其他约束，对象的自然属性是 image 参数的属性，默认对象大小 是输出位图的大小。[CSSIMAGES]
源矩形是其四个角为以下四个点的矩形：(sx, sy)、(sx+sw, sy)、(sx+sw, sy+sh)、(sx, sy+sh)。
目标矩形是其四个角为以下四个点的矩形：(dx, dy)、(dx+dw, dy)、(dx+dw, dy+dh)、(dx, dy+dh)。
当源矩形位于源图像之外时，源矩形必须被剪裁到源图像，目标矩形必须按相同的比例进行剪裁。
当目标矩形位于目标图像（输出位图）之外时，落在输出位图之外的像素将被丢弃，就好像目标是一个无限画布，其渲染被剪裁到输出位图的尺寸。
如果 sw 或 sh 参数之一为零，则返回。不绘制任何内容。
将 image 参数中由源矩形指定的区域绘制到渲染上下文的输出位图中由目标矩形指定的区域，并在将当前变换矩阵应用于目标矩形之后。
即使给定的尺寸为负数，也必须以原始方向处理图像数据。
向上缩放时，如果imageSmoothingEnabled 属性设置为 true，用户代理应尝试在缩放图像数据时应用平滑算法。支持多种滤波算法的用户代理可以使用imageSmoothingQuality 属性的值来指导在imageSmoothingEnabled 属性设置为 true 时选择滤波算法。否则，图像必须使用最近邻插值进行渲染。
本规范没有定义向下缩放图像或在imageSmoothingEnabled 属性设置为 true 时向上缩放图像时使用的精确算法。
当将canvas 元素绘制到其自身时，绘制模型要求在绘制图像之前复制源，因此可以将canvas 元素的一部分复制到其自身上的重叠部分。
如果原始图像数据是位图图像，则通过对原始图像数据进行滤波来计算目标矩形中的一个点的绘制值。用户代理可以使用任何滤波算法（例如双线性插值或最近邻插值）。当滤波算法需要来自原始图像数据外部的像素值时，它必须改为使用来自最接近边缘像素的值。（也就是说，滤波器使用“钳位到边缘”行为。）当滤波算法需要来自源矩形外部但位于原始图像数据内部的像素值时，必须使用原始图像数据中的值。
因此，部分或整体缩放图像将具有相同的效果。这意味着，当来自单个精灵表的精灵要进行缩放时，精灵表中的相邻图像可能会相互干扰。可以通过确保精灵表中的每个精灵都用透明黑色边框包围，或者通过将要缩放的精灵复制到临时canvas 元素中并从那里绘制缩放后的精灵来避免这种情况。
绘制图像不会影响当前路径，并且会受到阴影效果、全局 alpha、剪裁区域和当前合成和混合运算符的影响。
如果 image 不是原点清洁，则将CanvasRenderingContext2D 的原点清洁标志设置为 false。
imagedata = new ImageData(sw, sh [, settings])在所有当前引擎中都受支持。
返回一个 ImageData 对象，具有给定的尺寸和 settings 指示的颜色空间。返回对象中的所有像素均为透明黑色.
如果宽度或高度参数之一为零，则抛出"IndexSizeError" DOMException。
imagedata = new ImageData(data, sw [, sh [, settings ] ])返回一个 ImageData 对象，使用Uint8ClampedArray 参数中提供的 data，使用给定的尺寸和 settings 指示的颜色空间进行解释。
由于 data 中的每个像素都由四个数字表示，因此 data 的长度需要是给定宽度的四倍的倍数。如果还提供了高度，则长度需要正好是宽度乘以高度再乘以 4。
如果给定的 data 和尺寸无法一致地解释，或者任一尺寸为零，则抛出"IndexSizeError" DOMException。
imagedata = context.createImageData(imagedata)imagedata = context.createImageData(sw, sh [, settings])CanvasRenderingContext2D/createImageData
在所有当前引擎中都受支持。
返回一个 ImageData 对象，具有给定的尺寸。返回对象的颜色空间是 context 的颜色空间，除非被 settings 覆盖。返回对象中的所有像素均为透明黑色.
如果宽度或高度参数为零，则抛出 "IndexSizeError" DOMException。
imagedata = context.getImageData(sx, sy, sw, sh [, settings])CanvasRenderingContext2D/getImageData
在所有当前引擎中都受支持。
返回一个 ImageData 对象，其中包含给定位图矩形的图像数据。 返回对象的色彩空间是 context 的 色彩空间，除非被 settings 覆盖。
如果宽度或高度参数为零，则抛出 "IndexSizeError" DOMException。
imagedata.width在所有当前引擎中都受支持。
imagedata.height在所有当前引擎中都受支持。
以像素为单位返回 ImageData 对象中数据的实际尺寸。
imagedata.data在所有当前引擎中都受支持。
返回包含以 RGBA 顺序排列的数据的单维数组，以 0 到 255 范围内的整数表示。
imagedata.colorSpace返回像素的色彩空间。
context.putImageData(imagedata, dx, dy [, dirtyX, dirtyY, dirtyWidth, dirtyHeight ])CanvasRenderingContext2D/putImageData
在所有当前引擎中都受支持。
将给定 ImageData 对象中的数据绘制到位图上。 如果提供了脏矩形，则仅绘制该矩形中的像素。
globalAlpha 和 globalCompositeOperation 属性以及 阴影属性 在此方法调用中被忽略； 画布中的像素被完全替换，没有合成、alpha 混合、阴影等。
如果 imagedata 对象的 data 属性值的 [[ViewedArrayBuffer]] 内部槽位已分离，则抛出 "InvalidStateError" DOMException。
实现 CanvasImageData 接口的对象提供了以下方法，用于读取和写入位图的像素数据。
new ImageData(sw, sh, settings) 构造函数的步骤是
如果 sw 和 sh 中的一个或两个为零，则抛出 "IndexSizeError" DOMException。
new ImageData(data, sw, sh, settings) 构造函数的步骤是
令 length 为 data 中的字节数。
如果 length 不是 4 的非零整数倍数，则抛出 "InvalidStateError" DOMException。
令 length 为 length 除以 4 的结果。
如果 length 不是 sw 的整数倍数，则抛出 "IndexSizeError" DOMException。
在这一步，长度保证大于零（否则上面的第二步将中止步骤），因此，如果 sw 为零，则此步骤将抛出异常并返回。
令 height 为 length 除以 sw 的结果。
如果给出了 sh 且其值不等于 height，则抛出 "IndexSizeError" DOMException。
初始化 this，给定 sw、sh 和 settings 设置为 settings，以及 source 设置为 data。
此步骤不会将 this 的数据设置为 data 的副本。 它将其设置为作为 data 传递的实际 Uint8ClampedArray 对象。
createImageData(sw, sh, settings) 方法的步骤是
如果 sw 和 sh 中的一个或两个为零，则抛出 "IndexSizeError" DOMException。
令 newImageData 为一个新的 ImageData 对象。
初始化 newImageData，给定 sw 的绝对值、sh 的绝对值，settings 设置为 settings，以及 defaultColorSpace 设置为 this 的 色彩空间。
将 newImageData 的图像数据初始化为 透明黑色。
返回 newImageData。
createImageData(imagedata) 方法的步骤是
令 newImageData 为一个新的 ImageData 对象。
初始化 newImageData，给定 imagedata 的 width 属性的值、imagedata 的 height 属性的值，以及 defaultColorSpace 设置为 imagedata 的 colorSpace 属性的值。
将 newImageData 的图像数据初始化为 透明黑色。
返回 newImageData。
getImageData(sx, sy, sw, sh, settings) 方法的步骤是
如果 sw 或 sh 参数为零，则抛出 "IndexSizeError" DOMException。
如果 CanvasRenderingContext2D 的 origin-clean 标志设置为 false，则抛出 "SecurityError" DOMException。
令 imageData 为一个新的 ImageData 对象。
初始化 imageData，给定 sw、sh、settings 设置为 settings，以及 defaultColorSpace 设置为 this 的 色彩空间。
令源矩形为四个点 (sx, sy)、(sx+sw, sy)、(sx+sw, sy+sh)、(sx, sy+sh) 的矩形。
将 imageData 的像素值设置为 this 的 输出位图 在位图坐标空间单位中由源矩形指定的区域的像素，从 this 的 色彩空间 转换为 imageData 的 colorSpace，使用 '相对色度计' 渲染意图。
返回 imageData。
要 初始化一个 ImageData 对象 imageData，给定一个正整数行数 rows、一个正整数每行像素数 pixelsPerRow、一个可选的 ImageDataSettings settings、一个可选的 Uint8ClampedArray source 以及一个可选的 PredefinedColorSpace defaultColorSpace
如果给出了 source，则将 imageData 的 data 属性初始化为 source。
否则（未给出source），将imageData的data属性初始化为一个新的Uint8ClampedArray对象。该Uint8ClampedArray对象必须使用新的Canvas Pixel ArrayBuffer作为其存储，并且必须具有零起始偏移量，其长度等于其存储的长度（以字节为单位）。Canvas Pixel ArrayBuffer的大小必须正确，以便存储rows × pixelsPerRow像素。
如果无法分配Canvas Pixel ArrayBuffer，则重新抛出 JavaScript 抛出的RangeError，并返回。
将imageData的width属性初始化为pixelsPerRow。
将imageData的height属性初始化为rows。
如果给出了settings，并且settings["colorSpace"] 存在，则将imageData的colorSpace属性初始化为settings["colorSpace"]。
否则，如果给出了defaultColorSpace，则将imageData的colorSpace属性初始化为defaultColorSpace。
否则，将imageData的colorSpace属性初始化为"srgb"。
ImageData对象是可序列化对象。给定value和serialized，其序列化步骤为
将serialized.[[Width]]设置为value的width属性值。
将serialized.[[Height]]设置为value的height属性值。
将serialized.[[ColorSpace]]设置为value的colorSpace属性值。
给定serialized、value和targetRealm，其反序列化步骤为
将value的width属性初始化为serialized.[[Width]]。
将value的height属性初始化为serialized.[[Height]]。
将value的colorSpace属性初始化为serialized.[[ColorSpace]]。
一个Canvas Pixel ArrayBuffer是一个ArrayBuffer，其数据以从左到右、逐行从上到下的顺序表示，从左上角开始，每个像素的红色、绿色、蓝色和alpha分量按顺序给出，每个像素都以该顺序给出。该数组中表示的每个像素的每个分量必须在 0..255 范围内，表示该分量的 8 位值。这些分量必须被分配连续的索引，从左上角像素的红色分量的 0 开始。
该putImageData()方法将数据从ImageData结构写入渲染上下文的输出位图中。它的参数是：imagedata、dx、dy、dirtyX、dirtyY、dirtyWidth和dirtyHeight。
当省略此方法的最后四个参数时，必须假设它们分别具有值 0、0、imagedata结构的width成员和imagedata结构的height成员。
当调用此方法时，必须执行以下操作
令buffer为imagedata的data属性值的 [[ViewedArrayBuffer]] 内部槽。
如果IsDetachedBuffer(buffer) 为 true，则抛出一个"InvalidStateError" DOMException。
如果dirtyWidth为负数，则令dirtyX为dirtyX+dirtyWidth，并令dirtyWidth等于dirtyWidth的绝对值。
如果dirtyHeight为负数，则令dirtyY为dirtyY+dirtyHeight，并令dirtyHeight等于dirtyHeight的绝对值。
如果dirtyX为负数，则令dirtyWidth为dirtyWidth+dirtyX，并令dirtyX为零。
如果dirtyY为负数，则令dirtyHeight为dirtyHeight+dirtyY，并令dirtyY为零。
如果dirtyX+dirtyWidth大于imagedata参数的width属性，则令dirtyWidth为该width属性值减去dirtyX的值。
如果dirtyY+dirtyHeight大于imagedata参数的height属性，则令dirtyHeight为该height属性值减去dirtyY的值。
如果在这些更改之后，dirtyWidth或dirtyHeight为负数或零，则返回，而不影响任何位图。
对于x和y的所有整数值，其中dirtyX ≤ x < dirtyX+dirtyWidth和dirtyY ≤ y < dirtyY+dirtyHeight，将imagedata数据结构的Canvas Pixel ArrayBuffer中具有坐标 (x，y) 的像素的四个通道复制到渲染上下文的输出位图中具有坐标 (dx+x，dy+y) 的像素。
由于颜色空间之间的转换、转换为和从预乘alpha颜色值的转换的本质是损失性转换，因此刚刚使用putImageData()设置的像素，如果它们不完全不透明，则可能会作为不同的值返回给等效的getImageData()。
当前路径、变换矩阵、阴影属性、全局alpha、剪裁区域和当前合成和混合运算符不应影响本节中描述的方法。
在下面的示例中，脚本生成一个ImageData对象，以便它可以绘制到该对象上。
// canvas is a reference to a <canvas> element
var context = canvas. getContext( '2d' );
// create a blank slate
var data = context. createImageData( canvas. width, canvas. height);
// create some plasma
FillPlasma( data, 'green' ); // green plasma
// add a cloud to the plasma
AddCloud( data, data. width/ 2 , data. height/ 2 ); // put a cloud in the middle
// paint the plasma+cloud on the canvas
context. putImageData( data, 0 , 0 );
// support methods
function FillPlasma( data, color) { ... }
function AddCloud( data, x, y) { ... } 以下是如何使用getImageData()和putImageData()来实现边缘检测滤波器的示例。
<!DOCTYPE HTML>
< html lang = "en" >
< head >
< title > Edge detection demo</ title >
< script >
var image = new Image();
function init() {
image. onload = demo;
image. src = "image.jpeg" ;
}
function demo() {
var canvas = document. getElementsByTagName( 'canvas' )[ 0 ];
var context = canvas. getContext( '2d' );
// draw the image onto the canvas
context. drawImage( image, 0 , 0 );
// get the image data to manipulate
var input = context. getImageData( 0 , 0 , canvas. width, canvas. height);
// get an empty slate to put the data into
var output = context. createImageData( canvas. width, canvas. height);
// alias some variables for convenience
// In this case input.width and input.height
// match canvas.width and canvas.height
// but we'll use the former to keep the code generic.
var w = input. width, h = input. height;
var inputData = input. data;
var outputData = output. data;
// edge detection
for ( var y = 1 ; y < h- 1 ; y += 1 ) {
for ( var x = 1 ; x < w- 1 ; x += 1 ) {
for ( var c = 0 ; c < 3 ; c += 1 ) {
var i = ( y* w + x) * 4 + c;
outputData[ i] = 127 + - inputData[ i - w* 4 - 4 ] - inputData[ i - w* 4 ] - inputData[ i - w* 4 + 4 ] +
- inputData[ i - 4 ] + 8 * inputData[ i] - inputData[ i + 4 ] +
- inputData[ i + w* 4 - 4 ] - inputData[ i + w* 4 ] - inputData[ i + w* 4 + 4 ];
}
outputData[( y* w + x) * 4 + 3 ] = 255 ; // alpha
}
}
// put the image data back after manipulation
context. putImageData( output, 0 , 0 );
}
</ script >
</ head >
< body onload = "init()" >
< canvas ></ canvas >
</ body >
</ html > 以下是在使用getImageData()绘制纯色并使用getImageData()读取结果时，应用颜色空间转换的示例。
<!DOCTYPE HTML>
< html lang = "en" >
< title > Color space image data demo</ title >
< canvas ></ canvas >
< script >
const canvas = document. querySelector( 'canvas' );
const context = canvas. getContext( '2d' , { colorSpace: 'display-p3' });
// Draw a red rectangle. Note that the hex color notation
// specifies sRGB colors.
context. fillStyle = "#FF0000" ;
context. fillRect( 0 , 0 , 64 , 64 );
// Get the image data.
const pixels = context. getImageData( 0 , 0 , 1 , 1 );
// This will print 'display-p3', reflecting the default behavior
// of returning image data in the canvas's color space.
console. log( pixels. colorSpace);
// This will print the values 234, 51, and 35, reflecting the
// red fill color, converted to 'display-p3'.
console. log( pixels. data[ 0 ]);
console. log( pixels. data[ 1 ]);
console. log( pixels. data[ 2 ]);
</ script > context.globalAlpha [ = value ]CanvasRenderingContext2D/globalAlpha
在所有当前引擎中都受支持。
返回应用于渲染操作的当前全局alpha值。
可以设置，以更改全局alpha值。忽略 0.0 .. 1.0 范围之外的值。
context.globalCompositeOperation [ = value ]CanvasRenderingContext2D/globalCompositeOperation
在所有当前引擎中都受支持。
返回当前合成和混合运算符，来自合成和混合中定义的值。 [COMPOSITE]
可以设置，以更改当前合成和混合运算符。忽略未知值。
实现CanvasCompositing接口的对象具有全局alpha值和当前合成和混合运算符值，这两个值都会影响此对象上的所有绘图操作。
该全局alpha值给出一个alpha值，该alpha值在形状和图像被合成到输出位图之前应用于它们。该值的范围是 0.0（完全透明）到 1.0（没有额外的透明度）。它最初必须具有值 1.0。
该globalAlphagetter 步骤是返回this的全局alpha。
该globalAlphasetter 步骤为
当前合成和混合运算符的值控制如何将形状和图像绘制到输出位图上，前提是它们已经应用了全局alpha和当前变换矩阵。最初，它必须设置为"source-over"。
globalCompositeOperation 获取器的步骤是返回this的当前合成和混合运算符。
globalCompositeOperation 设置器的步骤是
如果给定值与<blend-mode>或<composite-mode>属性定义为接受的任何值都不相同，则返回。 [COMPOSITE]
否则，将this的当前合成和混合运算符设置为给定值。
context.imageSmoothingEnabled [ = value ]CanvasRenderingContext2D/imageSmoothingEnabled
在所有当前引擎中都受支持。
返回图案填充和drawImage()方法是否会在缩放图像时尝试平滑图像，即使它们的像素与显示不完全对齐。
可以设置，以更改图像是否平滑（true）或不平滑（false）。
context.imageSmoothingQuality [ = value ]CanvasRenderingContext2D/imageSmoothingQuality
返回当前的图像平滑质量偏好。
实现CanvasImageSmoothing 接口的对象具有控制图像平滑执行方式的属性。
imageSmoothingEnabled 属性在获取时必须返回上次设置的值。在设置时，它必须设置为新值。当创建实现CanvasImageSmoothing 接口的对象时，该属性必须设置为true。
imageSmoothingQuality 属性在获取时必须返回上次设置的值。在设置时，它必须设置为新值。当创建实现CanvasImageSmoothing 接口的对象时，该属性必须设置为"low"。
实现CanvasShadowStyles 接口的对象上的所有绘图操作都会受到四个全局阴影属性的影响。
context.shadowColor [ = value ]CanvasRenderingContext2D/shadowColor
在所有当前引擎中都受支持。
返回当前的阴影颜色。
可以设置，以更改阴影颜色。无法解析为 CSS 颜色的值将被忽略。
context.shadowOffsetX [ = value ]CanvasRenderingContext2D/shadowOffsetX
在所有当前引擎中都受支持。
context.shadowOffsetY [ = value ]CanvasRenderingContext2D/shadowOffsetY
在所有当前引擎中都受支持。
返回当前的阴影偏移量。
可以设置，以更改阴影偏移量。不是有限数字的值将被忽略。
context.shadowBlur [ = value ]CanvasRenderingContext2D/shadowBlur
在所有当前引擎中都受支持。
返回应用于阴影的当前模糊级别。
可以设置，以更改模糊级别。不是大于或等于零的有限数字的值将被忽略。
实现CanvasShadowStyles 接口的对象具有关联的阴影颜色，它是一个 CSS 颜色。最初，它必须是透明黑色。
shadowColor 获取器的步骤是返回this的阴影颜色的序列化结果。
shadowColor 设置器的步骤是
如果this的canvas 属性的值是元素，则让context为该元素；否则为null。
如果context不为null，则让parsedValue为使用context解析给定值的的结果。
如果parsedValue为失败，则返回。
将this的阴影颜色设置为parsedValue。
shadowOffsetX 和 shadowOffsetY 属性分别指定阴影将在正水平方向和正垂直方向偏移的距离。它们的值以坐标空间单位表示。它们不受当前变换矩阵的影响。
当创建上下文时，阴影偏移属性的初始值为0。
在获取时，它们必须返回它们的值。在设置时，必须将正在设置的属性设置为新值，除非该值为无穷大或NaN，在这种情况下，必须忽略新值。
shadowBlur 属性指定模糊效果的级别。（单位不映射到坐标空间单位，并且不受当前变换矩阵的影响。）
当创建上下文时，shadowBlur 属性的初始值为0。
在获取时，该属性必须返回它的值。在设置时，该属性必须设置为新值，除非该值为负数、无穷大或NaN，在这种情况下，必须忽略新值。
阴影仅在 阴影颜色的alpha分量的透明度分量不为零，并且shadowBlur 不为零，或者shadowOffsetX 不为零，或者shadowOffsetY 不为零的情况下绘制。
当绘制阴影时，它们必须按如下方式渲染
让A为一个无限的透明黑色 位图，在其上渲染了正在创建阴影的源图像。
让B为一个无限的透明黑色 位图，其坐标空间和原点与A相同。
将A的alpha通道复制到B，在正x方向上偏移shadowOffsetX，在正y方向上偏移shadowOffsetY。
如果shadowBlur 大于 0
让σ为shadowBlur 值的一半。
对B执行二维高斯模糊，使用σ作为标准差。
用户代理可能会将σ的值限制为特定于实现的最大值，以避免在高斯模糊操作期间超过硬件限制。
将B中每个像素的红色、绿色和蓝色分量分别设置为阴影颜色的红色、绿色和蓝色分量。
将B中每个像素的alpha分量乘以阴影颜色的alpha分量。
阴影在B位图中，并在下面描述的绘图模型中渲染。
如果当前合成和混合运算符是"copy"，则阴影实际上不会渲染（因为形状会覆盖阴影）。
实现CanvasFilters 接口的对象上的所有绘图操作都会受到全局filter 属性的影响。
context.filter [ = value ]CanvasRenderingContext2D/filter
返回当前过滤器。
可以设置，以更改过滤器。值可以是字符串"none"，也可以是可解析为<filter-value-list> 的字符串。其他值将被忽略。
此类对象具有关联的当前过滤器，它是一个字符串。最初，当前过滤器被设置为字符串"none"。无论何时当前过滤器的值为字符串"none"，过滤器都将为上下文禁用。
filter 获取器的步骤是返回this的当前过滤器。
filter 设置器的步骤是
如果给定值为"none"，则将this的当前过滤器设置为"none"并返回。
设 parsedValue 为将给定值解析为 <filter-value-list> 的结果。如果存在任何与属性无关的样式表语法（如“inherit”或“initial”），则此解析必须返回失败。
如果parsedValue为失败，则返回。
虽然 context. 会禁用上下文的过滤器，但 filter = "none"context.、filter = ""context. 和 filter = nullcontext. 都被视为无法解析的输入，且 当前过滤器 的值保持不变。filter = undefined
当前过滤器 值中使用的坐标被解释为：一个像素等于一个 SVG 用户空间单位，也等于一个画布坐标空间单位。过滤器坐标不受 当前变换矩阵 影响。当前变换矩阵只影响过滤器的输入。过滤器在 输出位图 的坐标空间中应用。
当 当前过滤器 的值为可解析为 <filter-value-list> 的字符串，并且该字符串使用百分比或 'em' 或 'ex' 单位定义长度时，这些长度必须相对于 字体样式源对象 设置属性时的 'font-size' 属性的 计算值 解释。如果 计算值 在特定情况下未定义（例如，因为 字体样式源对象 不是元素或未 被渲染），则相对关键字必须相对于 font 属性的默认值解释。“larger”和“smaller”关键字不受支持。
如果 当前过滤器 的值为可解析为 <filter-value-list> 的字符串，并且该字符串引用了同一文档中的 SVG 过滤器，而此 SVG 过滤器发生了改变，则下次绘制操作将使用更改后的过滤器。
如果 当前过滤器 的值为可解析为 <filter-value-list> 的字符串，并且该字符串引用了外部资源文档中的 SVG 过滤器，而调用绘制操作时该文档尚未加载，则绘制操作必须在没有过滤的情况下进行。
本节是非规范性的。
由于绘制是在外部定义的过滤器完成加载之前使用过滤器值“none”执行的，因此作者可能希望在执行绘制操作之前确定此类过滤器是否已完成加载。一种方法是在页面中其他位置加载外部定义的过滤器，加载到发送 load 事件的某个元素中（例如，SVG use 元素），并等待 load 事件被分派。
当绘制形状或图像时，用户代理必须按照给定的顺序执行以下步骤（或表现得好像它们执行了这些步骤）。
将形状或图像渲染到无限的 透明黑色 位图上，创建图像 A，如前几节所述。对于形状，必须遵守当前的填充、描边和线条样式，描边本身也必须受到当前变换矩阵的影响。
当 当前过滤器 设置为除“none”之外的值，并且它引用的所有外部定义的过滤器（如果有）都在当前加载的文档中时，则将图像 A 作为 当前过滤器 的输入，创建图像 B。如果 当前过滤器 是可解析为 <filter-value-list> 的字符串，则使用 当前过滤器 以与 SVG 相同的方式绘制。
否则，让 B 成为 A 的别名。
当绘制阴影时，使用当前阴影样式从图像 B 渲染阴影，创建图像 C。
当绘制阴影时，使用 当前合成和混合运算符，在 剪切区域 内将 C 合成到当前 输出位图 上。
将 B 中每个像素的 alpha 分量乘以 全局 alpha。
使用 当前合成和混合运算符，在 剪切区域 内将 B 合成到当前 输出位图 上。
合成到 输出位图 上时，必须丢弃落在 输出位图 外部的像素。
当画布是交互式的时，作者应该在与画布的每个 可聚焦 部分相对应的元素的回退内容中包含 可聚焦 元素，如 上面的示例 所示。
渲染焦点环时，为了确保焦点环具有原生焦点环的外观，作者应该使用 drawFocusIfNeeded() 方法，并向其传递正在绘制焦点环的元素。此方法只在元素 获得焦点 时绘制焦点环，因此可以在绘制元素时简单地调用它，而无需首先检查元素是否获得焦点。
作者应该避免使用 canvas 元素来实现文本编辑控件。这样做存在许多缺点
这需要大量的开发工作，强烈建议作者避免进行任何这些工作，而是使用 input 元素、textarea 元素或 contenteditable 属性。
本节是非规范性的。
以下是一个使用画布绘制 漂亮的发光线条 的脚本示例。
< canvas width = "800" height = "450" ></ canvas >
< script >
var context = document. getElementsByTagName( 'canvas' )[ 0 ]. getContext( '2d' );
var lastX = context. canvas. width * Math. random();
var lastY = context. canvas. height * Math. random();
var hue = 0 ;
function line() {
context. save();
context. translate( context. canvas. width/ 2 , context. canvas. height/ 2 );
context. scale( 0.9 , 0.9 );
context. translate( - context. canvas. width/ 2 , - context. canvas. height/ 2 );
context. beginPath();
context. lineWidth = 5 + Math. random() * 10 ;
context. moveTo( lastX, lastY);
lastX = context. canvas. width * Math. random();
lastY = context. canvas. height * Math. random();
context. bezierCurveTo( context. canvas. width * Math. random(),
context. canvas. height * Math. random(),
context. canvas. width * Math. random(),
context. canvas. height * Math. random(),
lastX, lastY);
hue = hue + 10 * Math. random();
context. strokeStyle = 'hsl(' + hue + ', 50%, 50%)' ;
context. shadowColor = 'white' ;
context. shadowBlur = 10 ;
context. stroke();
context. restore();
}
setInterval( line, 50 );
function blank() {
context. fillStyle = 'rgba(0,0,0,0.1)' ;
context. fillRect( 0 , 0 , context. canvas. width, context. canvas. height);
}
setInterval( blank, 40 );
</ script > 用于 canvas 的二维渲染上下文通常用于基于精灵的游戏。以下示例展示了这一点
以下是此示例的源代码
<!DOCTYPE HTML>
< html lang = "en" >
< meta charset = "utf-8" >
< title > Blue Robot Demo</ title >
< style >
html { overflow : hidden ; min-height : 200 px ; min-width : 380 px ; }
body { height : 200 px ; position : relative ; margin : 8 px ; }
. buttons { position : absolute ; bottom : 0 px ; left : 0 px ; margin : 4 px ; }
</ style >
< canvas width = "380" height = "200" ></ canvas >
< script >
var Landscape = function ( context, width, height) {
this . offset = 0 ;
this . width = width;
this . advance = function ( dx) {
this . offset += dx;
};
this . horizon = height * 0.7 ;
// This creates the sky gradient (from a darker blue to white at the bottom)
this . sky = context. createLinearGradient( 0 , 0 , 0 , this . horizon);
this . sky. addColorStop( 0.0 , 'rgb(55,121,179)' );
this . sky. addColorStop( 0.7 , 'rgb(121,194,245)' );
this . sky. addColorStop( 1.0 , 'rgb(164,200,214)' );
// this creates the grass gradient (from a darker green to a lighter green)
this . earth = context. createLinearGradient( 0 , this . horizon, 0 , height);
this . earth. addColorStop( 0.0 , 'rgb(81,140,20)' );
this . earth. addColorStop( 1.0 , 'rgb(123,177,57)' );
this . paintBackground = function ( context, width, height) {
// first, paint the sky and grass rectangles
context. fillStyle = this . sky;
context. fillRect( 0 , 0 , width, this . horizon);
context. fillStyle = this . earth;
context. fillRect( 0 , this . horizon, width, height- this . horizon);
// then, draw the cloudy banner
// we make it cloudy by having the draw text off the top of the
// canvas, and just having the blurred shadow shown on the canvas
context. save();
context. translate( width- (( this . offset+ ( this . width* 3.2 )) % ( this . width* 4.0 )) + 0 , 0 );
context. shadowColor = 'white' ;
context. shadowOffsetY = 30 + this . horizon/ 3 ; // offset down on canvas
context. shadowBlur = '5' ;
context. fillStyle = 'white' ;
context. textAlign = 'left' ;
context. textBaseline = 'top' ;
context. font = '20px sans-serif' ;
context. fillText( 'WHATWG ROCKS' , 10 , - 30 ); // text up above canvas
context. restore();
// then, draw the background tree
context. save();
context. translate( width- (( this . offset+ ( this . width* 0.2 )) % ( this . width* 1.5 )) + 30 , 0 );
context. beginPath();
context. fillStyle = 'rgb(143,89,2)' ;
context. lineStyle = 'rgb(10,10,10)' ;
context. lineWidth = 2 ;
context. rect( 0 , this . horizon+ 5 , 10 , - 50 ); // trunk
context. fill();
context. stroke();
context. beginPath();
context. fillStyle = 'rgb(78,154,6)' ;
context. arc( 5 , this . horizon- 60 , 30 , 0 , Math. PI* 2 ); // leaves
context. fill();
context. stroke();
context. restore();
};
this . paintForeground = function ( context, width, height) {
// draw the box that goes in front
context. save();
context. translate( width- (( this . offset+ ( this . width* 0.7 )) % ( this . width* 1.1 )) + 0 , 0 );
context. beginPath();
context. rect( 0 , this . horizon - 5 , 25 , 25 );
context. fillStyle = 'rgb(220,154,94)' ;
context. lineStyle = 'rgb(10,10,10)' ;
context. lineWidth = 2 ;
context. fill();
context. stroke();
context. restore();
};
};
</ script >
< script >
var BlueRobot = function () {
this . sprites = new Image();
this . sprites. src = 'blue-robot.png' ; // this sprite sheet has 8 cells
this . targetMode = 'idle' ;
this . walk = function () {
this . targetMode = 'walk' ;
};
this . stop = function () {
this . targetMode = 'idle' ;
};
this . frameIndex = {
'idle' : [ 0 ], // first cell is the idle frame
'walk' : [ 1 , 2 , 3 , 4 , 5 , 6 ], // the walking animation is cells 1-6
'stop' : [ 7 ], // last cell is the stopping animation
};
this . mode = 'idle' ;
this . frame = 0 ; // index into frameIndex
this . tick = function () {
// this advances the frame and the robot
// the return value is how many pixels the robot has moved
this . frame += 1 ;
if ( this . frame >= this . frameIndex[ this . mode]. length) {
// we've reached the end of this animation cycle
this . frame = 0 ;
if ( this . mode != this . targetMode) {
// switch to next cycle
if ( this . mode == 'walk' ) {
// we need to stop walking before we decide what to do next
this . mode = 'stop' ;
} else if ( this . mode == 'stop' ) {
if ( this . targetMode == 'walk' )
this . mode = 'walk' ;
else
this . mode = 'idle' ;
} else if ( this . mode == 'idle' ) {
if ( this . targetMode == 'walk' )
this . mode = 'walk' ;
}
}
}
if ( this . mode == 'walk' )
return 8 ;
return 0 ;
},
this . paint = function ( context, x, y) {
if ( ! this . sprites. complete) return ;
// draw the right frame out of the sprite sheet onto the canvas
// we assume each frame is as high as the sprite sheet
// the x,y coordinates give the position of the bottom center of the sprite
context. drawImage( this . sprites,
this . frameIndex[ this . mode][ this . frame] * this . sprites. height, 0 , this . sprites. height, this . sprites. height,
x- this . sprites. height/ 2 , y- this . sprites. height, this . sprites. height, this . sprites. height);
};
};
</ script >
< script >
var canvas = document. getElementsByTagName( 'canvas' )[ 0 ];
var context = canvas. getContext( '2d' );
var landscape = new Landscape( context, canvas. width, canvas. height);
var blueRobot = new BlueRobot();
// paint when the browser wants us to, using requestAnimationFrame()
function paint() {
context. clearRect( 0 , 0 , canvas. width, canvas. height);
landscape. paintBackground( context, canvas. width, canvas. height);
blueRobot. paint( context, canvas. width/ 2 , landscape. horizon* 1.1 );
landscape. paintForeground( context, canvas. width, canvas. height);
requestAnimationFrame( paint);
}
paint();
// but tick every 100ms, so that we don't slow down when we don't paint
setInterval( function () {
var dx = blueRobot. tick();
landscape. advance( dx);
}, 100 );
</ script >
< p class = "buttons" >
< input type = button value = "Walk" onclick = "blueRobot.walk()" >
< input type = button value = "Stop" onclick = "blueRobot.stop()" >
< footer >
< small > Blue Robot Player Sprite by < a href = "https://johncolburn.deviantart.com/" > JohnColburn</ a > .
Licensed under the terms of the Creative Commons Attribution Share-Alike 3.0 Unported license.</ small >
< small > This work is itself licensed under a < a rel = "license" href = "https://creativecommons.org/licenses/by-sa/3.0/" > Creative
Commons Attribution-ShareAlike 3.0 Unported License</ a > .</ small >
</ footer >
ImageBitmap 渲染上下文ImageBitmapRenderingContext 是一个面向性能的接口，它提供了一种低开销的方法来显示 ImageBitmap 对象的内容。它使用传输语义来减少总体内存消耗。它还通过避免中间合成来简化性能，这与 drawImage() 方法（CanvasRenderingContext2D）不同。
例如，使用 img 元素作为中间体将图像资源放入画布中会导致内存中同时存在图像解码的两个副本：img 元素的副本和画布后备存储中的副本。当处理极大的图像时，这种内存成本可能是禁止的。使用 ImageBitmapRenderingContext 可以避免这种情况。
使用 ImageBitmapRenderingContext，以下是如何以内存和 CPU 高效的方式将图像转码为 JPEG 格式。
createImageBitmap( inputImageBlob). then( image => {
const canvas = document. createElement( 'canvas' );
const context = canvas. getContext( 'bitmaprenderer' );
context. transferFromImageBitmap( image);
canvas. toBlob( outputJPEGBlob => {
// Do something with outputJPEGBlob.
}, 'image/jpeg' );
}); ImageBitmapRenderingContext 接口在所有当前引擎中都受支持。
[Exposed =(Window ,Worker )]
interface ImageBitmapRenderingContext {
readonly attribute (HTMLCanvasElement or OffscreenCanvas ) canvas ;
undefined transferFromImageBitmap (ImageBitmap ? bitmap );
};
dictionary ImageBitmapRenderingContextSettings {
boolean alpha = true ;
};context = canvas.getContext('bitmaprenderer' [, { [ alpha: false ] } ])返回一个 ImageBitmapRenderingContext 对象，该对象永久绑定到特定的 canvas 元素。
如果提供了 alpha 设置并将其设置为 false，则画布将始终强制为不透明。
context.canvas返回上下文绑定的 canvas 元素。
context.transferFromImageBitmap(imageBitmap)ImageBitmapRenderingContext/transferFromImageBitmap
在所有当前引擎中都受支持。
将 imageBitmap 中的底层 位图数据 传输到 context，并且位图成为 context 绑定的 canvas 元素的内容。
context.transferFromImageBitmap(null)将 context 绑定的 canvas 元素的内容替换为大小与 canvas 元素的 width 和 height 内容属性相对应的 透明黑色 位图。
canvas 属性必须返回在创建对象时初始化的值。
一个 ImageBitmapRenderingContext 对象有一个 输出位图，它是对 位图数据 的引用。
一个 ImageBitmapRenderingContext 对象有一个 位图模式，它可以设置为 有效 或 空白。值为 有效 表示上下文的 输出位图 引用通过 transferFromImageBitmap() 获取的 位图数据。值为 空白 表示上下文的 输出位图 是默认的透明位图。
一个 ImageBitmapRenderingContext 对象还有一个 alpha 标志，它可以设置为 true 或 false。当 ImageBitmapRenderingContext 对象的 alpha 标志设置为 false 时，通过将上下文的 输出位图 合成到相同大小的 不透明黑色 位图上来获取上下文绑定的 canvas 元素的内容，使用 source-over 合成运算符。如果 alpha 标志设置为 true，则 输出位图 用作上下文绑定的 canvas 元素的内容。 [COMPOSITE]
只要可以通过其他方法更有效地获得相同的结果，就应该省略在 不透明黑色 位图上进行合成的步骤。
当用户代理需要 设置 ImageBitmapRenderingContext 的输出位图 时，其中 context 参数是 ImageBitmapRenderingContext 对象，可选参数 bitmap 引用 位图数据，它必须运行以下步骤
如果没有提供 bitmap 参数，则
令 canvas 为 context 绑定的 canvas 元素。
将 context 的 输出位图 设置为 透明黑色，其 自然宽度 等于 canvas 的 width 属性的数值，其 自然高度 等于 canvas 的 height 属性的数值，这些值在 CSS 像素 中进行解释。
将 输出位图 的 origin-clean 标志设置为 true。
如果提供了 bitmap 参数，则
将 context 的 输出位图 设置为引用与 bitmap 相同的底层位图数据，而不进行复制。
bitmap 的 origin-clean 标志包含在要由 context 的 输出位图 引用的位图数据中。
ImageBitmapRenderingContext 创建算法，它接收 target 和 options，包括运行以下步骤
令 settings 为将 options 转换为字典类型 ImageBitmapRenderingContextSettings 的结果。（这可能会抛出异常。）
令 context 为一个新的 ImageBitmapRenderingContext 对象。
初始化 context 的 canvas 属性，使其指向 target。
将 context 的 输出位图 设置为与 target 的位图相同的位图（这样它们就共享了）。
运行设置 ImageBitmapRenderingContext 的输出位图的步骤，其中 context 为参数。
将 context 的 alpha 标志初始化为 true。
按如下方式处理 settings 中的每个成员
alpha返回context.
当调用 transferFromImageBitmap(bitmap) 方法时，它必须运行以下步骤
令 bitmapContext 为调用 transferFromImageBitmap() 方法的 ImageBitmapRenderingContext 对象。
如果 bitmap 为 null，则运行步骤以 设置 ImageBitmapRenderingContext 的输出位图，其中 bitmapContext 作为 context 参数，没有 bitmap 参数，然后返回。
如果 bitmap 的 [[Detached]] 内部槽设置为 true，则抛出 "InvalidStateError" DOMException。
运行步骤以 设置 ImageBitmapRenderingContext 的输出位图，其中 context 参数等于 bitmapContext，bitmap 参数引用 bitmap 的底层 位图数据。
将 bitmap 的 [[Detached]] 内部槽的值设置为 true。
取消设置 bitmap 的 位图数据。
OffscreenCanvas 接口 在所有当前引擎中都受支持。
typedef (OffscreenCanvasRenderingContext2D or ImageBitmapRenderingContext or WebGLRenderingContext or WebGL2RenderingContext or GPUCanvasContext ) OffscreenRenderingContext ;
dictionary ImageEncodeOptions {
DOMString type = "image/png";
unrestricted double quality ;
};
enum OffscreenRenderingContextId { " 2d " , " bitmaprenderer " , " webgl " , " webgl2 " , " webgpu " };
[Exposed =(Window ,Worker ), Transferable ]
interface OffscreenCanvas : EventTarget {
constructor ([EnforceRange ] unsigned long long width , [EnforceRange ] unsigned long long height );
attribute [EnforceRange ] unsigned long long width ;
attribute [EnforceRange ] unsigned long long height ;
OffscreenRenderingContext ? getContext (OffscreenRenderingContextId contextId , optional any options = null );
ImageBitmap transferToImageBitmap ();
Promise <Blob > convertToBlob (optional ImageEncodeOptions options = {});
attribute EventHandler oncontextlost ;
attribute EventHandler oncontextrestored ;
};OffscreenCanvas 是一个 EventTarget，因此 OffscreenCanvasRenderingContext2D 和 WebGL 都可以向其触发事件。 OffscreenCanvasRenderingContext2D 可以触发 contextlost 和 contextrestored，WebGL 可以触发 webglcontextlost 和 webglcontextrestored。 [WEBGL]
OffscreenCanvas 对象用于创建渲染上下文，类似于 HTMLCanvasElement，但与 DOM 没有连接。 这使得可以在 工作线程 中使用画布渲染上下文。
一个 OffscreenCanvas 对象可能包含对 占位符 canvas 元素 的弱引用，该元素通常位于 DOM 中，其嵌入式内容由 OffscreenCanvas 对象提供。 OffscreenCanvas 对象的位图被推送到 占位符 canvas 元素，作为 OffscreenCanvas 的 相关代理 的 事件循环 的 更新渲染 步骤的一部分。
offscreenCanvas = new OffscreenCanvas(width, height)OffscreenCanvas/OffscreenCanvas
在所有当前引擎中都受支持。
返回一个新的 OffscreenCanvas 对象，该对象未链接到 占位符 canvas 元素，其位图的大小由 width 和 height 参数确定。
context = offscreenCanvas.getContext(contextId [, options ])在所有当前引擎中都受支持。
返回一个对象，该对象公开了一个用于在 OffscreenCanvas 对象上绘图的 API。 contextId 指定所需的 API：" 2d"，"bitmaprenderer"，"webgl"，"webgl2" 或 "webgpu"。 options 由该 API 处理。
本规范定义了下面的 " 2d" 上下文，它类似于但不同于从 canvas 元素创建的 " 2d" 上下文。 WebGL 规范定义了 " webgl" 和 " webgl2" 上下文。 WebGPU 定义了 " webgpu" 上下文。 [WEBGL] [WEBGPU]
如果画布已经使用其他上下文类型初始化（例如，在获取 " webgl" 上下文后尝试获取 " 2d" 上下文），则返回 null。
一个 OffscreenCanvas 对象有一个内部 位图，该位图在对象创建时初始化。 位图 的宽度和高度等于 width 和 height 属性的值 OffscreenCanvas 对象。 最初，所有位图的像素都为 透明黑色。
一个 OffscreenCanvas 对象可以绑定渲染上下文。 最初，它没有绑定渲染上下文。 为了跟踪它是否具有渲染上下文以及它是哪种类型的渲染上下文，OffscreenCanvas 对象也具有一个 上下文模式，它最初为 none，但可以通过本规范中定义的算法更改为 2d，bitmaprenderer，webgl，webgl2，webgpu 或 detached。
构造函数 OffscreenCanvas(width, height)，在调用时，必须创建一个新的 OffscreenCanvas 对象，其 位图 初始化为一个矩形数组，其中包含 透明黑色 像素，尺寸由 width 和 height 指定；其 width 和 height 属性分别初始化为 width 和 height。
OffscreenCanvas 对象是 可传递的。 它们的 传递步骤，给定 value 和 dataHolder，如下所示
如果 value 的 上下文模式 不等于 none，则抛出 "InvalidStateError" DOMException。
令 width 和 height 为 value 的 位图 的尺寸。
取消设置 value 的 位图。
将 dataHolder.[[Width]] 设置为 width，并将 dataHolder.[[Height]] 设置为 height。
将 dataHolder.[[PlaceholderCanvas]] 设置为对 value 的 占位符 canvas 元素 的弱引用（如果 value 有的话），或者设置为 null（如果没有）。
它们的 传递接收步骤，给定 dataHolder 和 value，为
将 value 的 位图 初始化为一个矩形数组，其中包含 透明黑色 像素，宽度由 dataHolder.[[Width]] 给定，高度由 dataHolder.[[Height]] 给定。
如果 dataHolder.[[PlaceholderCanvas]] 不为 null，则将 value 的 占位符 canvas 元素 设置为 dataHolder.[[PlaceholderCanvas]]（同时保持弱引用语义）。
getContext(contextId, options) 方法的 OffscreenCanvas 对象，在调用时，必须运行以下步骤
如果 options 不是一个 对象，则将 options 设置为 null。
将 options 设置为 将 options 转换为 JavaScript 值的结果。
运行下表中单元格中的步骤，该单元格的列标题与该 OffscreenCanvas 对象的 上下文模式 匹配，行标题与 contextId 匹配
| none | 2d | bitmaprenderer | webgl 或 webgl2 | webgpu | detached | |
|---|---|---|---|---|---|---|
"2d" |
| 返回与上次使用相同第一个参数调用该方法时返回的相同对象。 | 返回null。 | 返回null。 | 返回null。 | 抛出 "InvalidStateError" DOMException。 |
"bitmaprenderer" |
| 返回null。 | 返回与上次使用相同第一个参数调用该方法时返回的相同对象。 | 返回null。 | 返回null。 | 抛出一个"InvalidStateError" DOMException。 |
"webgl" 或 "webgl2" | 返回null。 | 返回null。 | 返回与上次使用相同第一个参数调用该方法时返回的值相同的值。 | 返回null。 | 抛出一个"InvalidStateError" DOMException。 | |
"webgpu" |
| 返回null。 | 返回null。 | 返回null。 | 返回与上次使用相同第一个参数调用该方法时返回的值相同的值。 | 抛出一个"InvalidStateError" DOMException。 |
offscreenCanvas.width [ = value ]在所有当前引擎中都受支持。
offscreenCanvas.height [ = value ]在所有当前引擎中都受支持。
这些属性返回OffscreenCanvas 对象的位图 的尺寸。
如果OffscreenCanvas 对象的width 或height 属性被设置（设置为新值或设置为与之前相同的值）并且OffscreenCanvas 对象的上下文模式 为2d，则将渲染上下文重置为其默认状态 并将OffscreenCanvas 对象的位图 调整为width 和height 属性的新值。
“webgl” 和 “webgl2” 上下文的调整大小行为在 WebGL 规范中定义。 [WEBGL]
“webgpu” 上下文的调整大小行为在WebGPU 中定义。 [WEBGPU]
如果一个其尺寸已更改的OffscreenCanvas 对象具有占位符canvas 元素，则占位符canvas 元素 的自然大小 仅会在OffscreenCanvas 的相关代理 的事件循环 的更新渲染 步骤期间更新。
promise = offscreenCanvas.convertToBlob([options])在所有当前引擎中都受支持。
返回一个 promise，该 promise 将使用一个新的Blob 对象完成，该对象表示一个包含OffscreenCanvas 对象中的图像的文件。
如果提供，该参数是一个字典，用于控制要创建的图像文件的编码选项。 type 字段指定文件格式，其默认值为 "image/png"；如果请求的类型不受支持，则也使用该类型。如果图像格式支持可变质量（例如 "image/jpeg"），则 quality 字段是一个介于 0.0 到 1.0（含）之间的数字，表示生成图像所需的质量级别。
canvas.transferToImageBitmap()OffscreenCanvas/transferToImageBitmap
在所有当前引擎中都受支持。
返回一个新创建的ImageBitmap 对象，该对象包含OffscreenCanvas 对象中的图像。 OffscreenCanvas 对象中的图像将被替换为一个新的空白图像。
convertToBlob(options) 方法在调用时必须运行以下步骤
如果此OffscreenCanvas 对象的[[Detached]] 内部槽设置为 true，则返回一个被拒绝的 promise，并带有"InvalidStateError" DOMException。
如果此OffscreenCanvas 对象的上下文模式 为2d 并且渲染上下文的位图 的origin-clean 标志设置为 false，则返回一个被拒绝的 promise，并带有"SecurityError" DOMException。
如果此OffscreenCanvas 对象的位图 没有像素（即，其水平尺寸或垂直尺寸为零），则返回一个被拒绝的 promise，并带有"IndexSizeError" DOMException。
让bitmap 是此OffscreenCanvas 对象的位图 的副本。
让result 是一个新的 promise 对象。
并行 运行这些步骤
让file 是bitmap 作为文件的序列化，带有options 的type 和quality（如果存在）。
在给定的canvas 元素上排队一个元素任务，以便在canvas blob 序列化任务源 上运行这些步骤
如果file 为空，则使用"EncodingError" DOMException 拒绝result。
否则，使用一个新的Blob 对象解决result，该对象是在此OffscreenCanvas 对象的相关领域 中创建的，表示file。 [FILEAPI]
返回result。
transferToImageBitmap() 方法在调用时必须运行以下步骤
如果此OffscreenCanvas 对象的[[Detached]] 内部槽设置为 true，则抛出一个"InvalidStateError" DOMException。
如果此OffscreenCanvas 对象的上下文模式 设置为none，则抛出一个"InvalidStateError" DOMException。
让image 是一个新创建的ImageBitmap 对象，该对象引用与此OffscreenCanvas 对象的位图 相同的底层位图数据。
将此OffscreenCanvas 对象的位图 设置为引用一个新创建的位图，该位图与之前的位图具有相同的尺寸和颜色空间，并且其像素初始化为透明黑色，或者如果渲染上下文的alpha 标志设置为 false，则为不透明黑色。
这意味着如果此OffscreenCanvas 的渲染上下文是WebGLRenderingContext，则preserveDrawingBuffer 的值将不起作用。 [WEBGL]
返回image。
以下是所有实现OffscreenCanvas接口的对象必须支持的事件处理程序（及其对应的事件处理程序事件类型），作为事件处理程序IDL属性。
| 事件处理程序 | 事件处理程序事件类型 |
|---|---|
oncontextlost | contextlost
|
oncontextrestored | contextrestored
|
OffscreenCanvasRenderingContext2D
在所有当前引擎中都受支持。
[Exposed =(Window ,Worker )]
interface OffscreenCanvasRenderingContext2D {
readonly attribute OffscreenCanvas canvas ;
};
OffscreenCanvasRenderingContext2D includes CanvasState ;
OffscreenCanvasRenderingContext2D includes CanvasTransform ;
OffscreenCanvasRenderingContext2D includes CanvasCompositing ;
OffscreenCanvasRenderingContext2D includes CanvasImageSmoothing ;
OffscreenCanvasRenderingContext2D includes CanvasFillStrokeStyles ;
OffscreenCanvasRenderingContext2D includes CanvasShadowStyles ;
OffscreenCanvasRenderingContext2D includes CanvasFilters ;
OffscreenCanvasRenderingContext2D includes CanvasRect ;
OffscreenCanvasRenderingContext2D includes CanvasDrawPath ;
OffscreenCanvasRenderingContext2D includes CanvasText ;
OffscreenCanvasRenderingContext2D includes CanvasDrawImage ;
OffscreenCanvasRenderingContext2D includes CanvasImageData ;
OffscreenCanvasRenderingContext2D includes CanvasPathDrawingStyles ;
OffscreenCanvasRenderingContext2D includes CanvasTextDrawingStyles ;
OffscreenCanvasRenderingContext2D includes CanvasPath ;The OffscreenCanvasRenderingContext2D对象是用于绘制到OffscreenCanvas对象的位图的渲染上下文。它类似于CanvasRenderingContext2D对象，但存在以下差异
不支持用户界面功能；
其canvas属性引用的是OffscreenCanvas对象，而不是canvas元素；
An OffscreenCanvasRenderingContext2D对象有一个位图，该位图在对象创建时被初始化。
The 位图有一个origin-clean标志，可以设置为true或false。最初，当创建这些位图之一时，其origin-clean标志必须设置为true。
An OffscreenCanvasRenderingContext2D对象还有一个alpha标志，可以设置为true或false。最初，当创建上下文时，其alpha标志必须设置为true。当OffscreenCanvasRenderingContext2D对象的alpha标志设置为false时，其alpha通道必须固定为1.0（完全不透明），并且尝试更改任何像素的alpha分量将被静默忽略。
An OffscreenCanvasRenderingContext2D对象还有一个颜色空间设置，类型为PredefinedColorSpace。上下文的位图的颜色空间设置为上下文的颜色空间。
An OffscreenCanvasRenderingContext2D对象有一个关联的OffscreenCanvas对象，它是创建OffscreenCanvasRenderingContext2D对象的OffscreenCanvas对象。
offscreenCanvas = offscreenCanvasRenderingContext2D.canvasThe 离屏2D上下文创建算法，该算法传递一个target（一个OffscreenCanvas对象）和一些可选参数，包括执行以下步骤
如果算法传递了一些参数，则将第一个参数设为arg。否则，将arg设为undefined。
Let settings be the result of converting arg to the dictionary type CanvasRenderingContext2DSettings. (This can throw an exception.).
Let context be a new OffscreenCanvasRenderingContext2D object.
Set context's 关联的OffscreenCanvas对象 to target.
If settings["alpha"] is false, then set context's alpha flag to false.
Set context's 颜色空间 to settings["colorSpace"].
Set context's 位图 to a newly created bitmap with the dimensions specified by the width and height attributes of target, and set target's bitmap to the same bitmap (so that they are shared).
If context's alpha flag is set to true, initialize all the pixels of context's 位图 to 透明黑色. Otherwise, initialize the pixels to 不透明黑色.
返回context.
鼓励实现方式为更新占位符canvas元素的内容到显示器而对窗口事件循环的图形更新步骤进行短路。例如，这意味着位图内容可以直接复制到与占位符canvas元素的物理显示位置映射的图形缓冲区。这种或类似的短路方法可以显著减少显示延迟，尤其是在从工作者事件循环更新OffscreenCanvas且占位符canvas元素的窗口事件循环繁忙的情况下。但是，此类快捷方式不能有任何脚本可观察到的副作用。这意味着提交的位图仍然需要发送到占位符canvas元素，以防元素用作CanvasImageSource，作为ImageBitmapSource，或者在toDataURL()或toBlob()被调用时。
The canvas attribute, on getting, must return this OffscreenCanvasRenderingContext2D's 关联的OffscreenCanvas对象.
The canvas APIs provide mechanisms for specifying the color space of the canvas's backing store. The default backing store color space for all canvas APIs is 'srgb'.
颜色空间转换必须应用于canvas的后台存储，以便将canvas渲染到输出设备。此颜色空间转换必须与应用于具有颜色配置文件的img元素的颜色空间转换相同，该颜色配置文件指定与canvas后台存储相同的颜色空间。
When drawing content to a 2D context, all inputs must be converted to the context's color space before drawing. Interpolation of gradient color stops must be performed on color values after conversion to the context's color space. Alpha blending must be performed on values after conversion to the context's color space.
不存在任何对2D上下文输入的色彩空间未定义。CSS颜色的色彩空间在CSS Color中定义。指定无颜色配置文件信息的图像的色彩空间假定为'srgb'，如CSS Color的Untagged Colors的色彩空间部分所述。 [CSSCOLOR]
When a user agent is to create a serialization of the bitmap as a file, given a type and an optional quality, it must create an image file in the format given by type. If an error occurs during the creation of the image file (e.g. an internal encoder error), then the result of the serialization is null. [PNG]
图像文件中的像素数据必须是位图的像素数据，缩放到每个坐标空间单位一个图像像素，如果所用文件格式支持编码分辨率元数据，则分辨率必须给出为96dpi（每个CSS像素一个图像像素）。
如果提供了type，则必须将其解释为MIME类型，给出要使用的格式。如果类型有任何参数，则必须将其视为不支持。
例如，值"image/png" 将意味着生成 PNG 图像，值"image/jpeg" 将意味着生成 JPEG 图像，值"image/svg+xml" 将意味着生成 SVG 图像（这将需要用户代理跟踪位图的生成方式，这是一个不太可能但可能是很棒的功能）。
用户代理必须支持 PNG（"image/png"）。用户代理可以支持其他类型。如果用户代理不支持请求的类型，则它必须使用 PNG 格式创建文件。 [PNG]
用户代理必须 将提供的类型转换为 ASCII 小写，然后才能确定是否支持该类型。
对于不支持 alpha 通道的图像类型，序列化图像必须是位图图像，使用 source-over 合成运算符合成到 不透明黑色 背景上。
对于支持颜色配置文件的图像类型，序列化图像必须包含一个颜色配置文件，指示基础位图的颜色空间。对于不支持颜色配置文件的图像类型，序列化图像必须使用 'relative-colorimetric' 渲染意图转换为 'srgb' 颜色空间。
因此，在 2D 上下文中，调用 drawImage() 方法将 toDataURL() 或 toBlob() 方法的输出渲染到画布（给定适当的尺寸），除了最多将画布的颜色裁剪到更窄的色域外，不会产生任何可见的效果。
如果 type 是支持可变质量的图像格式（例如 "image/jpeg"），quality 被给出，并且 type 不是 "image/png"，那么，如果 Type(quality) 是 Number，并且 quality 在 0.0 到 1.0（含）范围内，用户代理必须将 quality 视为所需的质量级别。否则，用户代理必须使用其默认质量值，就好像未给出 quality 参数一样。
这里使用类型测试，而不是简单地将 quality 声明为 Web IDL double，是一个历史遗留问题。
不同的实现可能对“质量”有略微不同的解释。当质量未指定时，将使用特定于实现的默认值，该值代表压缩率、图像质量和编码时间之间的合理折衷方案。
canvas 元素进行安全 本节是非规范性的。
如果来自一个 来源 的脚本可以访问来自另一个来源（不是 相同 来源）的图像的信息（例如，读取像素），那么可能会发生 **信息泄漏**。
为了缓解这种情况，与 canvas 元素、OffscreenCanvas 对象和 ImageBitmap 对象一起使用的位图被定义为具有一个标志，指示它们是否 来源干净。所有位图的 来源干净 设置为 true。当使用跨来源图像时，标志将设置为 false。
toDataURL()、toBlob() 和 getImageData() 方法检查标志，如果检测到跨来源数据，则会抛出 "SecurityError" DOMException，而不是泄漏跨来源数据。
来源干净 标志的值通过 createImageBitmap() 从源的位图传播到新的 ImageBitmap 对象。相反，目标 canvas 元素的位图将在其 来源干净 标志被 drawImage 设置为 false，如果源图像是 ImageBitmap 对象，其位图的 来源干净 标志设置为 false。
标志可以在某些情况下重置；例如，当更改 canvas 元素（绑定了 CanvasRenderingContext2D）的 width 或 height 内容属性的值时，位图将被清除，其 来源干净 标志将被重置。
当使用 ImageBitmapRenderingContext 时，来源干净 标志的值在 ImageBitmap 对象通过 transferFromImageBitmap() 传输到 canvas 时，将从这些对象传播。
预乘 alpha 指的是在图像中表示透明度的一种方式，另一种方式是非预乘 alpha。
在非预乘 alpha 下，像素的红色、绿色和蓝色通道表示该像素的颜色，而其 alpha 通道表示该像素的不透明度。
然而，在预乘 alpha 下，像素的红色、绿色和蓝色通道表示像素添加到图像的颜色量，而其 alpha 通道表示像素遮挡其后内容的量。
例如，假设颜色通道的范围从 0（关闭）到 255（全强度），以下示例颜色以以下方式表示
| CSS 颜色表示 | 预乘表示 | 非预乘表示 | 颜色描述 | 混合在其他内容之上的颜色图像 |
|---|---|---|---|---|
| rgba(255, 127, 0, 1) | 255, 127, 0, 255 | 255, 127, 0, 255 | 完全不透明的橙色 | 
|
| rgba(255, 255, 0, 0.5) | 127, 127, 0, 127 | 255, 255, 0, 127 | 半透明的黄色 | 
|
| 无法表示 | 255, 127, 0, 127 | 无法表示 | 加性半透明橙色 | 
|
| 无法表示 | 255, 127, 0, 0 | 无法表示 | 加性完全透明的橙色 | 
|
| rgba(255, 127, 0, 0) | 0, 0, 0, 0 | 255, 127, 0, 0 | 完全透明（“不可见”）橙色 | 
|
| rgba(0, 127, 255, 0) | 0, 0, 0, 0 | 255, 127, 0, 0 | 完全透明（“不可见”）青绿色 |
|
将颜色值从非预乘表示转换为预乘表示 涉及将颜色的红色、绿色和蓝色通道乘以其 alpha 通道（重新映射 alpha 通道的范围，使得“完全透明”为 0，“完全不透明”为 1）。
将颜色值从预乘表示转换为非预乘表示 涉及逆运算：将颜色的红色、绿色和蓝色通道除以其 alpha 通道。
由于某些颜色只能在预乘 alpha 下表示（例如，加性颜色），而另一些颜色只能在非预乘 alpha 下表示（例如，“不可见”颜色，即使没有不透明度也保持某些红色、绿色和蓝色值）；并且 8 位整数（当前 canvas 的颜色存储方式）上的除法和乘法会导致精度损失，因此在非完全不透明的颜色之间进行预乘和非预乘 alpha 的转换是一个有损操作。
CanvasRenderingContext2D 的 输出位图 和 OffscreenCanvasRenderingContext2D 的 位图 必须使用预乘 alpha 来表示透明颜色。
canvas 位图使用预乘 alpha 来表示颜色非常重要，因为它会影响可表示颜色的范围。虽然由于 CSS 颜色是非预乘的，不能表示加性颜色，因此目前无法直接在画布上绘制加性颜色，但仍然可以通过例如在 WebGL 画布上绘制加性颜色，然后使用 drawImage() 将该 WebGL 画布绘制到 2D 画布上来实现。