canvas

基本用法

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

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

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

① 假设你想在Firefox 3 中使用元素。虽然浏览器会为该标签创建一个DOM
对象，而且也可以引用它，但这个对象中并没有getContext()方法。（据作者回复）

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

  var drawing = document.getElementById("drawing");
  //确定浏览器支持元素
  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 编码格式。由于这个方法是后来才追加的，所以支的浏览器也是在较新的版本中才加入了对它的支持，比如IE9、Firefox 3.5 和Opera 10。

1、 2D 上下文

使用2D 绘图上下文提供的方法，可以绘制简单的2D 图形，比如矩形、弧线和路径。2D 上下文的坐标开始于元素的左上角，原点坐标是(0,0)。所有坐标值都基于这个原点计算，x 值越大表示越靠右，y 值越大表示越靠下。默认情况下，width 和height 表示水平和垂直两个方向上可用的像素数目。

1.1填充和描边

2D 上下文的两种基本绘图操作是填充和描边。填充，就是用指定的样式（颜色、渐变或图像）填充图形；描边，就是只在图形的边缘画线。大多数2D 上下文操作都会细分为填充和描边两个操作，而操作的结果取决于两个属性：fillStyle 和strokeStyle。

这两个属性的值可以是字符串、渐变对象或模式对象，而且它们的默认值都是"#000000"。

1.2绘制矩形
矩形是唯一一种可以直接在2D 上下文中绘制的形状。与矩形有关的方法包括fillRect()、
strokeRect()和clearRect()。这三个方法都能接收4 个参数：矩形的x 坐标、矩形的y 坐标、矩形宽度和矩形高度。这些参数的单位都是像素。

首先，fillRect()方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过fillStyle 属
性指定，比如：

var drawing = document.getElementById("drawing");
//确定浏览器支持元素
if (drawing.getContext){
var context = drawing.getContext("2d");
/*
* 根据Mozilla 的文档
* http://developer.mozilla.org/en/docs/Canvas_tutorial:Basic_usage
*/
//绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//绘制半透明的蓝色矩形
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30, 30, 50, 50);
}

strokeRect()方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过strokeStyle 属性指定

描边线条的宽度由lineWidth 属性控制，该属性的值可以是任意整数。另外，通过lineCap
属性可以控制线条末端的形状是平头、圆头还是方头（"butt"、"round"或"square"），通过lineJoin 属性可以控制线条相交的方式是`圆交、斜交还是斜接（“round”、“bevel"或"miter”）。

clearRect()方法用于清除画布上的矩形区域。本质上，这个方法可以把绘制上下文中的某一矩形区域变透明。通过绘制形状然后再清除指定区域，就可以生成有意思的效果，例如把某个形状切掉一块。下面看一个例子。

var cvs = document.getElementById("drawing");
//浏览器是否支持canvas元素
if(cvs.getContext){
    var context = cvs.getContext(“2D”);
    /*
	* 根据Mozilla 的文档
	* http://developer.mozilla.org/en/docs/Canvas_tutorial:Basic_usage
   */
    //绘制红色矩形
    context.filStyle = "#ff0000";
    context.fillReact("10,10,50,50") ;
    //绘制蓝色矩形
    context.fillStyle = "rgba(0,0,255, 0.5)";
    context.fillReact(30,30,50,50);
    //在两个矩形重叠的地方清除一个小矩形
    context.clearRect(40, 40, 10, 10);
}

1.3绘制路径
要绘制路径，首先必须调用beginPath()方法，表示要开始绘制新路径
下面看一个例子，即绘制一个不带数字的时钟表盘。

 var drawing = document.getElementById("cvs");
	    // var cvs = document.getElementById("drawing");
	    //浏览器是否支持canvas元素
	    if(cvs.getContext){
	        var context = cvs.getContext("2d");
	        // 开始路径
	        context.beginPath();
	        // 绘制外圆
	        context.arc(100,100,99,0,2*Math.PI,false);
	        // 绘制内圆
	        context.moveTo(194,100);
	        context.arc(100, 100, 94, 0, 2*Math.PI, false);
	        //绘制分针
			context.moveTo(100, 100);
			context.lineTo(100, 15);
			//绘制时针
			context.moveTo(100, 100);
			context.lineTo(35, 100);
			//描边路径
			context.stroke();
 }