标题：canvas 2D API
1.1 getContext()方法
为了在canvas上绘制，你必须先得到一个画布上下文对象的引用，用本方法即可完成这一操作，格式如下：
context = canvas . getContext(contextId) 
方法返回一个指定contextId的上下文对象，如果指定的id不被支持，则返回null，当前唯一被强制必须支持的是“2d”，也许在将来会有“3d”，注意，指定的id是大小写敏感的。
1.2 toDataURL()方法
此函数，返回一张使用canvas绘制的图片，返回值符合data:URL格式，格式如下：
url = canvas . toDataURL( [ type, ... ]) 
规范规定，在未指定返回图片类型时，返回的图片格式必须为PNG格式，如果canvas没有任何像素，则返回值为：“data:,”，这是最短的data:URL，在text/plain资源中表现为空字符串。type的可以在image/png，image/jpeg,image/svg+xml等 MIME类型中选择。如果是image/jpeg，可以有第二个参数，如果第二个参数的值在0-1之间，则表示JPEG的质量等级，否则使用浏览器内置默认质量等级。
下面的代码可以从ID为codeex的canvas中取得绘制内容，并作为DataURL传递给img元素，并显示。
varcanvas = document.getElementById('codeex');
varurl = canvas.toDataURL();
//id为myimg的图片元素
myimg.src = url;  

1 二维绘图上下文 当使用一个canvas元素的getContext(“2d”)方法时，返回的是CanvasRenderingContext2D对象，其内部表现为笛卡尔平面坐标，并且左上角坐标为(0,0)，在本平面中往右则x坐标增加和往下方y坐标增加。每一个canvas元素仅有一个上下文对象。其接口如下：
interface CanvasRenderingContext2D{

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

  // state 
  void restore(); // pop state stack and restore state
  void save();     // push state on state stack 
        
  // transformations (default transform is the identity matrix)
  void rotate(in float angle);
  void scale(in float x, in float y);
  void setTransform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
  void transform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
  void translate(in float x, in float y);
        
  // compositing 
  attribute float globalAlpha; // (default 1.0)
  attribute DOMString globalCompositeOperation; // (default source-over)
        
  // colors and styles 
  attribute any fillStyle; // (default black)
  attribute any strokeStyle; // (default black)
  CanvasGradient createLinearGradient(in float x0, in float y0, in float x1, in float y1);
  CanvasGradient createRadialGradient(in float x0, in float y0, in float r0, in float x1, in float y1, in float r1);
  CanvasPattern createPattern(in HTMLImageElement image, in DOMString repetition);
  CanvasPattern createPattern(in HTMLCanvasElement image, in DOMString repetition);
  CanvasPattern createPattern(in HTMLVideoElement image, in DOMString repetition);

  // line styles 
  attribute DOMString lineCap; // "butt", "round", "square" (default "butt")
  attribute DOMString lineJoin; // "miter", "round", "bevel"  (default "miter")
  attribute float lineWidth; // (default 1)
  attribute float miterLimit; // (default 10)

  // shadows 
  attribute float shadowBlur; // (default 0)
  attribute DOMString shadowColor; // (default transparent black)
  attribute float shadowOffsetX; // (default 0)
  attribute float shadowOffsetY; // (default 0)

  // rects 
  void clearRect(in float x, in float y, in float w, in float h);
  void fillRect(in float x, in float y, in float w, in float h);
  void strokeRect(in float x, in float y, in float w, in float h);

  // Complex shapes (paths) API 
  void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);
  void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);
  void beginPath();
  void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);
  void clip();
  void closePath();
  void fill();
  void lineTo(in float x, in float y);
  void moveTo(in float x, in float y);
  void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);
  void rect(in float x, in float y, in float w, in float h);
  void stroke();
  boolean isPointInPath(in float x, in float y);

  // 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")
  void fillText(in DOMString text, in float x, in float y, optional in float maxWidth);
  TextMetrics measureText(in DOMString text);
  void strokeText(in DOMString text, in float x, in float y, optional in float maxWidth);

  // drawing images 
  void drawImage(in HTMLImageElement image, in float dx, in float dy, optional in float dw, in float dh);
  void drawImage(in HTMLImageElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
  void drawImage(in HTMLCanvasElement image, in float dx, in float dy, optional in float dw, in float dh);
  void drawImage(in HTMLCanvasElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
  void drawImage(in HTMLVideoElement image, in float dx, in float dy, optional in float dw, in float dh);
  void drawImage(in HTMLVideoElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);

  // pixel manipulation
  ImageData createImageData(in float sw, in float sh);
  ImageData createImageData(in ImageData imagedata);
  ImageData getImageData(in float sx, in float sy, in float sw, in float sh);
  void putImageData(in ImageData imagedata, in float dx, in float dy, optional in float dirtyX, in float dirtyY, in float dirtyWidth, in float dirtyHeight);
};

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

interface CanvasPattern{
  // opaque object
};

interface TextMetrics{
  readonly attribute float width;
};

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

interface CanvasPixelArray{
  readonly attribute unsigned long length;
  getter octet(in unsigned long index);
  setter void(in unsigned long index, in octet value);
};

1.1 canvas的状态
每个上下文都包含一个绘图状态的堆，绘图状态包含下列内容：
&sup2;       当前的transformation matrix.
&sup2;     当前的clipping region
&sup2;     当前的属性值：fillStyle, font, globalAlpha, 
globalCompositeOperation, lineCap, lineJoin,
lineWidth, miterLimit, shadowBlur, shadowColor,
shadowOffsetX, shadowOffsetY, strokeStyle, textAlign, 
textBaseline
1.2 转换(Transformations)
当建立形状和路径时，转换矩阵被应用到其坐标上。转换的执行顺序是严格按顺序的(注：原文是反向，经试验应该是按调用顺序的)。
在做转换/变形之前先保存状态是一个良好的习惯。大多数情况下，调用 restore 方法比手动恢复原先的状态要简单得多。又，如果你是在一个循环中做位移但没有保存和恢复 canvas 的状态，很可能到最后会发现怎么有些东西不见了，那是因为它很可能已经超出 canvas 范围以外了。
context. rotate(angle)  //按给定的弧度旋转,按顺时针旋转
rotate方法旋转的中心始终是canvas的原点，如果要改变它，需要使用translate方法。
context.translate(75,75); 
for (var i=1;i<6;i++){
context.save(); 
context.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)'; 
for (var j=0;j<i*6;j++){       context.rotate(Math.PI*2/(i*6)); 
context.beginPath(); 
context.arc(0,i*12.5,5,0,Math.PI*2,true); 
context.fill(); 
} 
context.restore(); 
}
context. scale(x, y) //按给定的缩放倍率缩放，1.0,为不变
参数比1.0小表示缩小，否则表示放大。默认情况下，canvas 的 1 单位就是 1 个像素。举例说，如果我们设置缩放因子是 0.5，1 个单位就变成对应 0.5 个像素，这样绘制出来的形状就会是原先的一半。同理，设置为 2.0 时，1 个单位就对应变成了 2 像素，绘制的结果就是图形放大了 2 倍。
context
1.1   canvas的状态
每个上下文都包含一个绘图状态的堆，绘图状态包含下列内容：
&sup2;       当前的transformation matrix.
&sup2;     当前的clipping region
&sup2;     当前的属性值：fillStyle, font, globalAlpha, 
globalCompositeOperation, lineCap, lineJoin,
lineWidth, miterLimit, shadowBlur, shadowColor,
shadowOffsetX, shadowOffsetY, strokeStyle, textAlign, 
textBaseline
注：当前path和当前bitmap不是绘图状态的一部分，当前path是持久存在的，仅能被beginPath()复位，当前bitmap是canvas的属性，而非绘图上下文。
context. restore() //弹出堆最上面保存的绘图状态
context. save() //在绘图状态堆上保存当前绘图状态
绘图状态可以看作当前画面应用的所有样式和变形的一个快照。而状态的应用则可以避免绘图代码的过度膨胀。
1.2   转换(Transformations)
当建立形状和路径时，转换矩阵被应用到其坐标上。转换的执行顺序是严格按顺序的(注：原文是反向，经试验应该是按调用顺序的)。
在做转换/变形之前先保存状态是一个良好的习惯。大多数情况下，调用 restore 方法比手动恢复原先的状态要简单得多。又，如果你是在一个循环中做位移但没有保存和恢复 canvas 的状态，很可能到最后会发现怎么有些东西不见了，那是因为它很可能已经超出 canvas 范围以外了。
context. rotate(angle)  //按给定的弧度旋转,按顺时针旋转
rotate方法旋转的中心始终是canvas的原点，如果要改变它，需要使用translate方法。
context.translate(75,75); 
for (var i=1;i<6;i++){
context.save(); 
context.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)'; 
for (var j=0;j<i*6;j++){       context.rotate(Math.PI*2/(i*6)); 
context.beginPath(); 
context.arc(0,i*12.5,5,0,Math.PI*2,true); 
context.fill(); 
} 
context.restore(); 
}

context. scale(x, y) //按给定的缩放倍率缩放，1.0,为不变
参数比1.0小表示缩小，否则表示放大。默认情况下，canvas 的 1 单位就是 1 个像素。举例说，如果我们设置缩放因子是 0.5，1 个单位就变成对应 0.5 个像素，这样绘制出来的形状就会是原先的一半。同理，设置为 2.0 时，1 个单位就对应变成了 2 像素，绘制的结果就是图形放大了 2 倍。
context. setTransform(m11, m12, m21, m22, dx, dy) //重设当前的转换到
context. transform(m11, m12, m21, m22, dx, dy) //矩阵变换，结果等于当前的变形矩阵乘上
m11 
m21 
dx 
m12 
m22 
dy 
0
0
1

后的结果
context. translate(x, y) //可以理解为偏移，向x,y方向偏移指定的量,其用来移动Canvas的原点到一个指定的值
. setTransform(m11, m12, m21, m22, dx, dy) //重设当前的转换到
context. transform(m11, m12, m21, m22, dx, dy) //矩阵变换，结果等于当前的变形矩阵乘上
m11 
m21 
dx 
m12 
m22 
dy 
0
0
1
后的结果
context. translate(x, y) //可以理解为偏移，向x,y方向偏移指定的量,其用来移动Canvas的原点到一个指定的值