JavaScript之使用Canvas绘图(一)

   HTML5最受欢迎的功能之一就是<canvas>元素，这个元素负责在页面中设定一个区域，然后就可以通过javascript动态地在这个区域中绘制图形。与浏览器的其他组件类似，<canvas>由几组API构成，但并非所有浏览器都支持所有这些API。除了具备基本绘图能力的2D上下文，<canvas>还建议了一个名为WebGL的3D上下文。

基本用法

    使用<canvas>元素必须先设置其width和height属性，指定可以绘图的区域大小。如果浏览器不支持<canvas>元素，就会显示写在<canvas></canvas>标签对之间的内容。例子：

<canvas id="myCanvas" width="400px" height="400px">此浏览器不支持canvas元素</canvas>;

要在此画布（canvas）上绘图，需要取得绘图上下文，调用getContent()方法来取得绘图上下文对象的引用。传入上下文的名字“2d”即可取得2D上下文对象。

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

   使用toDataURL（）方法可以导出在<canvas>元素上绘制的图像，此方法接受一个参数，即图像的MIME类型格式，而且适用于创建图像的任何上下文。例子：取得画布中的一幅