HTML5中的Canvas元素

canvas元素是HTML5中新增的一个重要元素，专门用来绘制图形，在页面上放置一个canvas元素，就相当于在页面上放置一块“画布”，可以在其中进行图形的描绘。

canvas元素只是一块无色透明的区域。需要利用JavaScript编写在其中进行绘画的脚本。从这个角度来说，您可以理解为类似于其它开发语言中的canvas画布。

canvas元素要求至少设置width和height特性，以指定要创建的绘图区域大小。任何在起始和结束标签之间的内容是候选内容，它们当浏览器不支持<canvas>元素的时候便会显示。例如：

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

和其它元素一样，width和height他特性也可以作为DOM元素对象的属性使用，可以在任何时刻更改。整个元素也可以使用CSS定义样式。

开始在画布上绘图之前，要先取得绘图的环境。canvas元素正式支持一个2D绘图环境。绘图环境的引用可以使用getContext()方法获取，要传入一个“2D”参数，如下：

var drawing = document.getElementById("drawing");//确保支持<canvas>if(drawing.getContext){var context = drawing.getContext("2d");//其它代码}

当使用canvas元素时，一定要测试getContext()方法是否存在。有些浏览器会为非正式的HTML元素创建默认的HTML元素对象。这种情况下，getContext()方法就不可用了，会造成脚本执行错误。

1.canvas绘制长方形

2D绘图环境的原点（0，0）在元素的左上角，坐标值都是相对于该点计算的。默认情况下，width和height即宽和高，表示了在各方向上有多少个像素。

唯一的一个可以直接在2D绘图环境中绘制的图形就是长方形。长方形有三个方法：fillRect()、strokeRect()和clearRect()。三个方法都接受四个参数：长方形的x坐标、y坐标、宽和高。参数的单位是像素。

fillrect填充色彩是使用fillStyle属性指定的，它一开始等于黑色（“#000000”）。可以将该属性设置为以六位十六进制数指定的任意色彩，或者使用CSSrgb()或者rgba()格式。如下例：

var drawing = document.getElementById("drawing");//确保完全支持<canvas>if(drawing.getContext){var context = drawing.getContext("2d");
    context.fillStyle ="#EEEEFF";
    context.fillRect(0,0,200,200);//绘制一个红色的长方形
    context.fillStyle ="#ff0000";
    context.fillRect(10,10,50,50);//绘制一个半透明的蓝色长方形
    context.fillStyle ="rgba(0, 0, 255, 0.5)";
    context.fillRect(30,30,50,50);}

该代码首先将fillStyle设置为红色，然后在（10，10）绘制了一个50像素高和宽的长方形。然后，又使用rgba()格式将fillStyle设为一个半透明的蓝色，并画了另一个长方形覆盖了第一个。结果可以看到红色和蓝色长方形中间接在一起。

strokeRect()方法使用由strokeStyle属性指定的颜色绘制了一个长方形外框。和fillStyle属性一样，strokeStyle默认为“#000000”，并可以使用十六进制值、rgb()或者rgba()设置。如下例：

var drawing = document.getElementById("drawing");//确保完全支持<canvas>if(drawing.getContext){var context = drawing.getContext("2d");//填充画布
    context.fillStyle ="#EEEEFF";
    context.fillRect(0,0,200,200);//绘制一个红色的长方形边框
    context.strokeStyle ="#ff0000";
    context.strokeRect(10,10,50,50);//绘制一个半透明的蓝色长方形边框
    context.strokeStyle ="rgba(0, 0, 255, 0.5)";
    context.strokeRect(20,30,50,50);}

这段代码也绘制了两个重叠的长方形；不过，都只是边框而不是填充的长方形。

画笔的大小是由lineWidth属性控制的，可以设置为任意整数。类似还有，lineCap属性描述了在线段终点所使用的形状（“butt”、“round”或者“square”），lineJoin表示线段如何连接（“round”、“bevel”或“miter”）。

可以使用clearRect()方法清除画布的一块区域。该方法用于让一块绘图环境变透明。通过绘制图形然后清除指定区域，就可以创建有趣的效果，比如切掉另一个形状的一部分。如下例：

var drawing = document.getElementById("drawing");//确保完全支持<canvas>if(drawing.getContext){var context = drawing.getContext("2d");//填充画布
    context.fillStyle ="#EEEEFF";
    context.fillRect(0,0,200,200);//绘制一个红色的长方形
    context.fillStyle ="#ff0000";
    context.fillRect(10,10,50,50);//绘制一个半透明的蓝色长方形
    context.fillStyle ="raba(0, 0, 255, 0.5)";
    context.fillRect(30,30,50,50);//创建一个覆盖前面长方形的长方形
    context.clearRect(40,40,10,10);}

这里有两个填充的相互覆盖的长方形，然后另一个小长方形清除了中间的覆盖区域。

2.canvas绘制路径

2D绘图环境支持一些在画布上绘制路径的方法，可以创建复杂的形状和线条。要开始创建路径，必须首先调用beginPath()表示新路经开始。然后，可以调用以下方法创建路径。

• arc(x,y,radius,startAngle,endAngleanticlockwise)——绘图中心点在（x,y）的弧，半径为radius,角度在startAngle和endAngle(单位是弧度)之间。最后一个参数是一个布尔值，表示startAngle和endAngle是逆时针方向计算还是顺时针方向计算。
• arcTo(x1,y1,x2,y2,radius)——绘制从上一个点到（x2,y2）的弧，经过（x1,y1），半径为radius。
• bezierCurveTo(c1x,c1y,c2x,c2y,x,y)——使用控制点（c1x,c1y）和（c2x,c2y）从最后一点到点（x,y）绘制一条曲线。
• lineTo(x,y)——从最后一点到点（x,y）绘制一条直线。
• moveTo(x,y)——将光标移动到点（x,y）而不绘制线条。
• quadraticCurveTo(xx,cy,x,y)——使用控制点（cx,cy）从最后一点绘制一条二次曲线到点（x,y）。
• rect(x,y,width,height)——在点（x,y）绘制一个长width和宽height的矩形。与strokeRect()和fillRect()不一样的是，这个函数创建一个路径而不是单独的形状。

一旦创建好路径之后，还可以调用fill()方法用fillStyle填充色。另外一个选项调用stroke()方法对路径描边，使用strokeStyle()。最后一个选项是调用clip()，根据路径创建一个裁剪区域。

请看下面绘制一个钟（不带数字）的例子：

var drawing = document.getElementById("drawing");//确保完全支持（canvas）if(drawing.getContext){var context = drawing.getContext("2d");//填充画布
    context.fillStyle ="#EEEEFF";
    context.fillRect(0,0,200,200);//路径开始
    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();}

这个例子使用arc()绘制了两个圆：内外各一，用于创建钟的边框。外圆半径为99像素，中心在（100，100），也就是画布的中心。要绘制一个完整的圆，必须起始于0度角，画整一圈至2π个弧度（使用Math.PI进行计算）。在绘制内圆之前，路径必须移动到一个圆所在的新点，以面绘制额外的线条。第二次调用arc()使用了缩小的半径以到达边框效果。之后，组合使用moveTo()和lineTo()绘制了时针和分针。最后一步是调用stroke()，让图形显示。

路径是2D绘图环境的主要绘制机制，因为它们让开发人员能更好地控制要画什么。由于路径使用频繁，还有个方法叫做isPointInPath()，接受一个x坐标和y坐标作为参数。该方法可以在路径关闭之前任意时间点调用，来判断某个点是否在于路径之上，如下所示：

if(context.isPointInPath(100,100)){
    alert("Point(100, 100) is in the path.");}

2D绘图环境的路径API十分强健，足够使用多种填充样式、画笔样式和其它样式创建复杂的图形。