说说 canvas 的基本用法

要使用 <canvas> 元素，要先设置 width 和 height，它们决定了绘图的区域大小。在开始和结束标签中是后备信息，如果浏览器不支持 canvas，就会显示这些信息：

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

也可以为 canvas 元素添加 CSS 样式，如果不添加样式或者不绘制任何图形，是看不到任何东西的。

要在 canvas 上绘图，就必须取得 2D 上下文对象：

var drawing = document.getElementById("drawing");

if (drawing.getContext) {//确定浏览器支持 canvas

    ...
}

toDataURL() 方法会导出 <canvas> 元素上绘制的图像。它接受一个图像的 MIME 类型的参数，比如这里要取得画布上的一幅 PNG 格式的图像：

<script type="text/javascript">
    var drawing = document.getElementById("drawing");

    if (drawing.getContext) {//确定浏览器支持 canvas
        //取得图像的数据 URI
        var imgURI = drawing.toDataURL("image/png");

        //显示图像
        var image = document.createElement("img");
        image.src = imgURI;
        document.body.appendChild(image);

    }
</script>

默认情况下，浏览器会把图像编码为 PNG 格式。IE9、Firefox 3.5 和 Opera 10 也支持 “image/jpeg” 的编码格式。

---

注意： 如果绘制到画布上的图像来自于不同的域，那么使用 toDataURL() 方法会抛出错误！

---