15.1 基本用法

要使用<canvas>元素，必须先设置其width 和height 属性，指定可以绘图的区域大小。出现在开始和结束标签中的内容是后备信息，如果浏览器不支持<canvas>元素，就会显示这些信息。下面就是<canvas>元素的例子。

<canvas id="drawing" width=" 200" height="200">A drawing of something.</canvas>

与其他元素一样，<canvas>元素对应的DOM 元素对象也有width 和height 属性，可以随意修改。而且，也能通过CSS 为该元素添加样式，如果不添加任何样式或者不绘制任何图形，在页面中是看不到该元素的。
要在这块画布（canvas）上绘图，需要取得绘图上下文。而取得绘图上下文对象的引用，需要调用getContext()方法并传入上下文的名字。传入"2d"，就可以取得2D 上下文对象。

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

在使用<canvas>元素之前，首先要检测getContext()方法是否存在，这一步非常重要。有些浏览器会为HTML 规范之外的元素创建默认的HTML 元素对象①。在这种情况下，即使drawing 变量中保存着一个有效的元素引用，也检测不到getContext()方法。
使用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。

如果绘制到画布上的图像源自不同的域，toDataURL()方法会抛出错误。本章后面还将介绍更多相关内容。