13 点击区域 任何canvas元素，它们的主要上下文是一个CanvasRenderingContext2D对象，一定具有一个点击区域列表，与它的位图相关联。 The hit region list is a list of hit regions.点击区域列表是一个点击区域的列表。 每个点击区域是由以下信息构成的： 一个在canvas元素的位图上的路径路径，位图的区域是可响应的。 一个在canvas元素的位图上的边界圆周，位图包围了点击区域的路径，在创建它时就存在了。 可选的，一个非空的字符串，代表一个ID，用于识别其它的区域。 可选的，一个控件。 A control is a reference to an Element
15 合成 context . globalAlpha [ = value ] 返回应用到呈现操作中的当前Alpha值。 可以设置它以改变Alpha值。超出0.0到1.0范围的的值会被忽略掉。 context . globalCompositeOperation [ = value ] 从下面的列表返回当前的合成操作。 可以设置它以改变合成操作。未知的值会被忽略掉。 All drawing operations are affected by the global compositing attributes, globalAlpha and globalCompositeOperation. The globalAlpha attribute gives an alpha value that is applied to shapes and images before they are
14 像素操纵 imagedata = context . createImageData(sw, sh) 返回一个ImageData对象，带有CSS像素中给定的维度（它可能映射到一个不同数字的实际设备像素，由这个对象本身曝露）。在返回对象中所有的像素都是透明黑的。 imagedata = context . createImageData(imagedata) 返回一个ImageData，它带有和参数相同的维度。在返回对象内所有的像素都是透明黑的。 imagedata = context . getImageData(sx, sy, sw, sh) 返回一个ImageData对象，它包含了画布的给定矩形的图像数据。 如果宽度或高度参数是零，就会抛出一个IndexSizeError异常。 数据一定会返回，并针对画布上的每个坐标空间单位带有一个数据数据的像素。 imagedata . wid
12 向画布上绘制图像 要想在画布是绘制图像，可以使用drawImage方法。 这个方法可以带三个不同集合的参数来调用执行： drawImage(image, dx, dy) drawImage(image, dx, dy, dw, dh) drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 这三种方法中任一种都可以要么取一个HTMLImageElement要么取一个HTMLCanvasElement要么取一个HTMLVideoElement作为image参数。 context . drawImage(image, dx, dy) context . drawImage(image, dx, dy, dw, dh) context . drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 把给定的图像
11 向画布上绘制路径 这个上下文已经具有一个当前默认路径。它只有一个当前路径，它不是绘图状态的一部分。当前路径是一个路径，如上所述。 context . beginPath() 重置当前路径。 context . fill() 用当前填充样式填充当前路径的子路径，或者给定路径。 context . stroke() 用当前描边样式描边当前路径的子路径，或者给定路径。 context . drawFocusIfNeeded(element) 通知画布的用户用于回调元素的位置，基于当前路径。如果给定的元素具有焦点，会根据当前平台或者用户代理针对焦点轮廓的惯例，围绕着当前路径绘制一个焦点轮廓，这个惯例它是由用户代理定义的。 context . clip() 针对当前路径的更多的约束剪切区域 context . isPointInPath(x, y) 如果给定的点在当前路径中，就返回true b
10 向画布上绘制文本 context . fillText(text, x, y [, maxWidth ] ) context . strokeText(text, x, y [, maxWidth ] ) 填充或描边（各自）在给定的位置指定文本。如果提供了最大的宽度，必要的话，文本将会被缩放以适合宽度。 metrics = context . measureText(text) 用当前字体中指定的文本文件的度量，返回一个TextMetrics对象。 metrics . width 返回传递给measureText()方法的文本的高级宽度。 CanvasRenderingContext2D接口提供了下面的方法，用于在画布上直接呈现文本。 fillText()方法和strokeText()方法取用三个或四个参数：text、x、y以及可选的maxWidth，并且在给定的(x, y)坐标生呈
9 把矩形绘制到画布上 有三个方法可以快速向位图绘制矩形。它们总是取用四个参数；前两个参数分别给定了矩形的左上角的x坐标和y坐标，后两个参数分别给定了矩形的宽度值w和高度值h。 当前的变换矩阵一定会被应用到后面的四个坐标上，它们形成的路径一定会闭合，以得到指定的矩形：(x, y)、(x+w, y)、(x+w,y+h)、(x, y+h)。 Shapes are painted without affecting the current default path, and are subject to the clipping region, and, with the exception of clearRect(), also shadow effects, global alpha, a
8 筛选和描边样式 context . fillStyle [ = value ] 返回当前用于填充形状的样式。 可以设置它以改变填充样式 这个样式可以是包含一个CSS颜色的字符串，或者是一个CanvasGradient对象或者CanvasPattern对象。不合法的值会被忽略掉。 context . strokeStyle [ = value ] 返回当前用于描边形状的样式。 可以设置它以改变描边样式。 这个样式可以是包含一个CSS颜色的字符串，或者是一个CanvasGradient对象或者CanvasPattern对象。不合法的值会被忽略掉。 元素属性fillStyle代表了用在形状上的颜色和样式，而元素属性strokeStyle代表了用在形状轮廓线上的颜色和样式。 这两个元素属性都可以是字符串，CanvasGradient对象，或者CanvasPattern对象。在设置时，字符串一定
7 用于2D呈现上下文的图像源 这个并集类型允许对象实现任何以下接口，以用作一个图像源： HTMLImageElement (img elements) HTMLVideoElement (video elements) HTMLCanvasElement (canvas elements) 当一个用户代理需要检查image参数的功能时，其中image是一个CanvasImageSource对象，用户代理必须运行这些步骤，它们会返回good、bad或者aborted： 如果image参数是一个处于broken状态的HTMLImageElement对象，则会抛出一个InvalidStateError异常，返回aborted，并中断这些步骤。 如果image参数是一个并非完全可解的HTMLImageElement对象，或者如果image参数是一个HTMLVideoElement对象，其元素属性
18 最佳实践 这一章是非标准的 When a canvas is interactive, authors should include focusable elements in the element's fallback content corresponding to each focusable part of the canvas. To indicate which focusable part of the canvas is currently focused, authors should use the drawFocusIfNeeded() method, passing it the element for which an outline is being drawn. This method only draws the focus outline if t
17 Drawing model When a shape or image is painted, user agents must follow these steps, in the order given (or act as if they do): Render the shape or image onto an infinite transparent black bitmap, creating image A, as described in the previous sections. For shapes, the current fill, stroke, and line styles must be honored, and the stroke must itself also be subjected to the current transformati
16 Shadows 所有的绘图操作都受四个全局阴影元素属性的影响： context . shadowColor [ = value ] Returns the current shadow color. Can be set, to change the shadow color. Values that cannot be parsed as CSS colors are ignored. context . shadowOffsetX [ = value ] context . shadowOffsetY [ = value ] Returns the current shadow offset. Can be set, to change the shadow offset. Values that are not finite numbers are ignored. conte
6 变换 每个CanvasRenderingContext2D对象都具有一个当前变换矩阵，以及操纵它的方法（在本章节中描述）。如果创建了一个CanvasRenderingContext2D对象，它的变换矩阵一定会被初始化以识别变换。 在一个CanvasRenderingContext2D在创建当前路径时、在绘制文本、形状和路径时，变换矩阵会应用到坐标， 大多数API使用SVGMatrix对象，而不是使用这个API。这个API只是为了历史原因而保留的。 变换一定要以相反的顺序执行。 举个例子，如果一个双倍放大了宽度的缩放变换应用到画布上，后面跟着一个旋转变换，用一个四分角转向旋转绘制操作，而且一个两倍宽度作为高度的矩形会绘制在画布上，实际结果将是一个方形。 context . scale(x, y) 改变变换矩阵以应用一个带有给定特征的缩放变形。 context . rotate(angle
5 建立路径 每个实现了CanvasPathMethods接口的对象都具有一个path。每个path都具有一个包含了零个或多个子路径的数列。每个子路径由一个或多个点的数列构成，用直线或曲线连接，还有一个标识，表示子路径是否是闭合的。一个闭合的子路径，是这样的路径：子路径的最后一点与子路径的第一个点用直线相连。在绘制路径时，少于两个点的子路径会被忽略。 如果创建了一个实现了CanvasPathMethods接口的对象，它的path一定会被初始化为零个子路径。 context . moveTo(x, y) 用给定的点创建一个子路径。 context . closePath() 把当前子路径标记为闭合，并开始一个新的子路径，它的首端和末端与刚闭合的子路径的首端和末端相同。 context . lineTo(x, y) 向当前的子路径添加给定的点，用一条直线连接到前一个点。 context . q
4 文本样式 context . font [ = value ] 返回当前字体设置。 可以设置它，来改变字体。它的句法与CSS属性'font'相同；不能解析为CSS字体值的属性会被忽略。 相关的关键字和长度，由相关的canvas元素的字体计算而来。 context . textAlign [ = value ] 返回当前文本的对齐方式设置。 可以设置它，来改变对齐方式。可能的值是 "start"、"end"、"left"、"right"和"center"。别的值会被忽略掉。默认值是"start"。 context . textBaseline [ = value ] 返回当前基线对齐方式设置。 可以对齐它，来改变基线对齐方式。可能的值和它们的意义在下面给出。别的值会被忽略。默认值是"allphabetic"。 IDL（接口定义语言）元素属性font，在设置它时，必须用CSS属性'font
3 线样式 context . lineWidth [ = value ] 返回当前的线宽。 可以设置它来改变线宽。大于0的无穷大的值会被忽略。 context . lineCap [ = value ] 返回当前线端头的样式。 可以设置它来改变线端头。 可能的线端头样式是"butt"、"round"、"square"。别的值会被忽略。 context . lineJoin [ = value ] 返回当前线接头的样式。 可以设置它来改变线接头的样式。 可能的线接口的样式是"bevel"、"round"和"miter"。别的值会被忽略掉的。 context . miterLimit [ = value ] 返回当前的斜接限制率。 可以设置它来改变斜接限制率。大于0的无穷大的值会被忽略。 context . setLineDash(segments) 设置当前线的虚点式样（在描边时使用）。这
1 一致性要求 本规范文档是一个HTML规范文档。所有的在HTML5规范文档中描述到的一致性要求、一致性样式类、定义、依赖性、术语以及印刷约定，都应用到本规范文档上。[HTML] Web接口描述语言定义了这些接口。[WEBIDL] 本规范文档定义了2d上下文类型，它的API使用CanvasRenderingContext2D接口来实现。 当一个contextId 2d的新对象返回canvas元素的getContext()方法的时候，用户代理必须返回一个新的CanvasRenderingContext2D对象。任何多出来的参数都会被忽略。 2D上下文代表了一个平面笛卡尔表面，它的原点(0,0)在左上角，坐标空间的x值向右递增，y值向下递增。 typedef (HTMLImageElement or HTMLVideoElement or HTMLCanvasElement) CanvasIm
2 画布状态 每个上下文保留了一个绘图状态的栈。绘图状态由以下内容构成： 当前的变形矩阵。 当前的裁剪区域。 以下元素属性的当前值：strokeStyle、fillStyle、globalAlpha、lineWidth、lineCap、lineJoin、miterLimit、shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor、globalCompositeOperation、font、textAlign、textBaseline。 当前路径和当前位图不是绘图状态的一部分。当前路径是一直存在的，只能用beginPath()方法来重置。当前位置是画布的属性，不是上下文的属性。 context . save() 把当前状态推荐到栈上。 context . restore() 取回栈中最后一个状态，把上下文恢复到这个状态。 save()方法一定会把
摘要 本规范文档为HTML的canvas元素定义了2D上下文。2D上下文提供了对象、方法和属性，用来绘制并操纵canvas绘图表面上的图形。 本文档的状态 This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/. This is the specification for the 2D
References All references are normative unless marked "Non-normative". [BEZIER] Courbes à poles, P. de Casteljau. INPI, 1959. [CSS] Cascading Style Sheets Level 2 Revision 1 (URL: http://www.w3.org/TR/CSS/), B. Bos, T. Çelik, I. Hickson, H. Lie. W3C. [CSSCOLOR] CSS Color Module Level 3 (URL: http://www.w3.org/TR/css3-color/), T. Çelik, C. Lilley, L. Baron. 7 June 2011. W3C Recommendation. [CSSFONT