翻译/梳理：HTML Canvas 2D Context W3C Recommendation 19 November 2015

1、一致性要求

1.1、当调用方法canvasElement.getContext（'2d'），用户代理必须返回一个新的CanvasRenderingContext2D对象。 忽略任何其他参数。
1.2、2D上下文表示一个平坦的笛卡尔表面，其原点（0,0）位于左上角，坐标空间的x值向右增加，而y值在下降时增加。
1.3、interface CanvasRenderingContext2D / CanvasDrawingStyles / CanvasPathMethods / CanvasGradient / CanvasPattern / TextMetrics / HitRegionOptions / ImageData :

typedef (HTMLImageElement or
         HTMLVideoElement or
         HTMLCanvasElement) CanvasImageSource;

interface CanvasRenderingContext2D {

  // back-reference to the canvas
  readonly attribute HTMLCanvasElement canvas;

  // state
  void save(); // push state on state stack
  void restore(); // pop state stack and restore state

  // transformations (default: transform is the identity matrix)
  void scale(unrestricted double x, unrestricted double y);
  void rotate(unrestricted double angle);
  void translate(unrestricted double x, unrestricted double y);
  void transform(unrestricted double a, unrestricted double b, unrestricted double c, unrestricted double d, unrestricted double e, unrestricted double f);
  void setTransform(unrestricted double a, unrestricted double b, unrestricted double c, unrestricted double d, unrestricted double e, unrestricted double f);

  // compositing
           attribute unrestricted double globalAlpha; // (default: 1.0)
           attribute DOMString globalCompositeOperation; // (default: "source-over")

  // colors and styles (see also the CanvasDrawingStyles interface)
           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);
  CanvasPattern createPattern(CanvasImageSource image, [TreatNullAs=EmptyString] DOMString repetition);

  // 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")

  // rects
  void clearRect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);
  void fillRect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);
  void strokeRect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);

  // path API (see also CanvasPathMethods)
  void beginPath();
  void fill();
  void stroke();
  void drawFocusIfNeeded(Element element);
  void clip();
  boolean isPointInPath(unrestricted double x, unrestricted double y);

  // text (see also the CanvasDrawingStyles interface)
  void fillText(DOMString text, unrestricted double x, unrestricted double y, optional unrestricted double maxWidth);
  void strokeText(DOMString text, unrestricted double x, unrestricted double y, optional unrestricted double maxWidth);
  TextMetrics measureText(DOMString text);

  // drawing images
  void drawImage(CanvasImageSource image, unrestricted double dx, unrestricted double dy);
  void drawImage(CanvasImageSource image, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);
  void 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);

  // hit regions
  void addHitRegion(HitRegionOptions options);
  void removeHitRegion(DOMString id);
  void clearHitRegions();

  // pixel manipulation
  ImageData createImageData(unrestricted double sw, unrestricted double sh);
  ImageData createImageData(ImageData imagedata);
  ImageData getImageData(double sx, double sy, double sw, double sh);
  void putImageData(ImageData imagedata, double dx, double dy);
  void putImageData(ImageData imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight);
};
CanvasRenderingContext2D implements CanvasDrawingStyles;
CanvasRenderingContext2D implements CanvasPathMethods;

[NoInterfaceObject]
interface CanvasDrawingStyles {
  // line caps/joins
           attribute unrestricted double lineWidth; // (default: 1)
           attribute DOMString lineCap; // "butt", "round", "square" (default: "butt")
           attribute DOMString lineJoin; // "round", "bevel", "miter" (default: "miter")
           attribute unrestricted double miterLimit; // (default: 10)

  // dashed lines
  void setLineDash(sequence<unrestricted double> segments); // (default: empty)
  sequence<unrestricted double> getLineDash();
           attribute unrestricted double lineDashOffset;


  // text
           attribute DOMString font; // (default: "10px sans-serif")
           attribute DOMString textAlign; // "start", "end", "left", "right", "center" (default: "start")
           attribute DOMString textBaseline; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
};

[NoInterfaceObject]
interface CanvasPathMethods {
  // shared path API methods
  void closePath();
  void moveTo(unrestricted double x, unrestricted double y);
  void lineTo(unrestricted double x, unrestricted double y);
  void quadraticCurveTo(unrestricted double cpx, unrestricted double cpy, unrestricted double x, unrestricted double y);
  void bezierCurveTo(unrestricted double cp1x, unrestricted double cp1y, unrestricted double cp2x, unrestricted double cp2y, unrestricted double x, unrestricted double y);
  void arcTo(unrestricted double x1, unrestricted double y1, unrestricted double x2, unrestricted double y2, unrestricted double radius); 
  void rect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);
  void arc(unrestricted double x, unrestricted double y, unrestricted double radius, unrestricted double startAngle, unrestricted double endAngle, optional boolean counterclockwise = false); 

  };

interface CanvasGradient {
  // opaque object
  void addColorStop(double offset, DOMString color);
};

interface CanvasPattern {
  // opaque object
};

interface TextMetrics {
  readonly attribute double width;
};

dictionary HitRegionOptions {
  // dictionary to allow expansion on Hit Regions in Canvas Context 2D Level 2
  DOMString id = "";
  // for control-backed regions:
  Element? control = null;
};

interface ImageData {
  readonly attribute unsigned long width;
  readonly attribute unsigned long height;
  readonly attribute Uint8ClampedArray data;
};

提示： context.canvas 返回canvas元素

2、canvas 的状态

2.1、每个上下文都维护一系列绘图状态。 绘图状态包括：

• 当前的 transformation matrix.
• 当前的 clipping region.
• 以及：strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline.

2.2、context.save() ： 推送一个当前绘图状态的copy到绘图状态栈。
2.3、context.restore()：返回绘图状态栈最后推送的那个绘图状态。如果之前没有保存任何状态，什么都不做

提示：当前路径和当前位图不是绘图状态的一部分。 当前路径是持久的，只能使用beginPath（）方法重置。 当前位图是画布的属性，而不是上下文。

3、线条样式

• context.lineWidth [ = value ]
  返回当前线条的宽度，可以设置新值。值如果是小于等于0或则是无限的，将被忽略。
• context.lineCap [ = value ]
  返回当前线条顶端的样式，可以设置新值修改。值只能是“butt", "round", and "square"（"对接”，“圆形”和“方形”），其他值将忽略。
• context.lineJoin [ = value ]
  返回线条连接方式，可以设置新值。值只能是"bevel", "round", and "miter"(“斜角”，“圆形”和“斜切”)，其他值将忽略。
• context.miterLimit [ = value ]
  返回两条线交汇处内角和外角之间的距离，可以设置。值如果是小于等于0或则是无限的，将被忽略。参考canvas_miterlimit
• context.setLineDash(segments)
  设置交替绘制线段和间距。参数是一个数组，如果数组元素个数是奇数，数组元素会被复制一次。比如 [5, 10, 15] 会变成 [5, 10, 15, 5, 10, 15]。参考CanvasRenderingContext2D
• segments = context.getLineDash()
  返回当前交替绘制线段和间距的copy版本。
• context . lineDashOffset [ = value ]
  偏移量的浮点数。 最初0.0。值如果是无限的，将被忽略。（效果和svg实现线条描绘那个偏移差不多）

4、文字样式

• context.font [ = value ]
  返回当前字体设置，可以修改。语法与CSS'font'属性相同;无法解析为CSS字体值的值将被忽略。相对关键字和长度是相对于canvas元素的字体计算的。
• context.textAlign [ = value ]
  返回当前文字对齐设置，可以修改。可以取值有"start", "end", "left", "right", 和 "center"。其他值会被忽略，初始值是"start"。
• context.textBaseline [ = value ]
  返回文本的基线，可以修改。默认值是"alphabetic"。可取值："top", "hanging", "middle", "alphabetic", "ideographic", "bottom"
  

5、绘制路径

5.1、路径与子路径：

a、实现CanvasPathMethods接口的每个对象都有一个路径。
b、路径的子路径可以有0到多个。 
c、每个子路径包含一个或多个点的列表，由直线或曲线连接，以及一个标志，指示子路径是否关闭。
d、绘制路径时忽略具有少于两个点的子路径。
e、当实现CanvasPathMethods接口的对象时，其路径的子路径必须初始化为0个。
f、如果对象的路径没有子路径，则closePath（）方法不会执行任何操作。
否则，它必须将最后一个子路径标记为关闭，创建一个新的子路径，其第一个点与前一个子路径的第一个
点相同，最后将此新子路径添加到路径中。

5.2、如果要使用矩阵变换，必须在点或则线添加到路径之前使用变换。

5.3、api:

• context.moveTo(x, y)
  用给定的x,y创建一个新的子路径。（原文Creates a new subpath with the given point.）
• context.closePath()
  将当前子路径标记为关闭，并且以当前点作为起始点开始一个新的子路径。
• context.lineTo(x, y)
  将给定点添加到当前子路径，用直线与上一个点相连接。
• context.quadraticCurveTo(cpx, cpy, x, y)
  将给定点添加到当前子路径，用二次贝塞尔曲线与上一个点相连接。
• context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
  将给定点添加到当前子路径，用贝塞尔曲线与上一个点相连接。

• context.arcTo(x1, y1, x2, y2, radius)

  参数为：(弧的起点X，弧的起点Y，弧的终点X，弧的终点Y,弧的半径)。
     a、如果点（x0，y0）等于点（x1，y1），或者点（x1，y1）等于点（x2，y2），或者半径为零，
  则方法 必须将点（x1，y1）添加到子路径中，并将该点用直线连接到前一个点（x0，y0）。
     b、如果上述三个点在一条直线上，那么将X2/y2添加到子路经中，并将其与X0/Y0连接。

• context.arc(x, y, radius, startAngle, endAngle [, counterclockwise ])
  参数分别是（rx，ry，半径，开始弧度，结束弧度，false顺时针/true逆时针）。默认顺时针，参见1.3。
  如果(counterclockwise===false)&&(结束弧度-开始弧度 >= 2Math.PI) || (counterclockwise===true)&&(开始弧度- 结束弧度>= 2Math.PI) 那么弧是整个圆周。
  弧度=角度*(Math.PI/180)。
  如果给定半径小于0，会抛出IndexSizeError异常。
  
• context.rect(x, y, w, h)
  向路径添加一个新的闭合子路径，表示给定的矩形。

再次提示：当前路径是持久的，只能使用 beginPath() 方法重置。

未完待续。。。。。。