api

1.getContext()

要在这块画布（canvas）上绘图，需要取得绘图上下文。而取得绘图上下文对象的引用，需要调用
getContext()方法并传入上下文的名字。传入"2d"，就可以取得 2D 上下文对象。

var drawing = document.getElementById("drawing")
//确定浏览器支持<canvas>元素, 这段代码至关重要
if (drawing.getContext){
  var context = drawing.getContext("2d")
  //更多代码
}

1.1 2D 上下文的两种基本绘图操作是填充和描边。

大多数 2D 上下文操作都会细分为填充和描边两个操作，而操作的结果取决于两个属性：fillStyle 和 strokeStyle。
这两个属性的值可以是字符串、渐变对象或模式对象，而且它们的默认值都是"#000000"。如果为
它们指定表示颜色的字符串值，可以使用 CSS 中指定颜色值的任何格式，包括颜色名、十六进制码、
rgb、rgba、hsl 或 hsla。举个例子：

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
 var context = drawing.getContext("2d");
 context.strokeStyle = "red";
 context.fillStyle = "#0000ff";
}

以上代码将 strokeStyle 设置为 red（CSS 中的颜色名），将 fillStyle 设置为#0000ff（蓝色）。
然后，所有涉及描边和填充的操作都将使用这两个样式，直至重新设置这两个值。如前所述，这两个属
性的值也可以是渐变对象或模式对象。本章后面会讨论这两种对象。

2.toDataURL()

使用 toDataURL()方法，可以导出在<canvas>元素上绘制的图像。这个方法接受一个参数，即图
像的 MIME 类型格式，而且适合用于创建图像的任何上下文。比如，要取得画布中的一幅 PNG 格式的
图像，可以使用以下代码。

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
 //取得图像的数据 URI
 var imgURI = drawing.toDataURL("image/png");
 //显示图像
 var image = document.createElement("img");
 image.src = imgURI;
 document.body.appendChild(image);
} 

默认情况下，浏览器会将图像编码为 PNG 格式（除非另行指定）。Firefox 和 Opera 也支持基于
"image/jpeg"参数的 JPEG 编码格式。由于这个方法是后来才追加的，所以支持<canvas>的浏览器也
是在较新的版本中才加入了对它的支持，比如 IE9、Firefox 3.5 和 Opera 10。