使用Canvas绘图（2）--绘制路径

绘制路径

2D绘制上下文支持不少在画布上绘制路径的方法。经过路径能够创造出复杂的形状和线条。要绘制路径，首先必需要调用beginPath()方法，表示要开始绘制新路径。而后，要经过调用下列方法来实际地绘制路径。canvas

arc(x,y,radius,startAngle,endAngle,counterclockwise):以（x,y）为圆心绘制一条弧线，弧线半径为radius，起始和结束角度（用弧度表示）分别为startAngle和endAngle。最后一个参数表示startAngle和endAngle是否按逆时针方向计算，值为false表示按顺时针方向计算。浏览器

arcTo(x1,y1,x2,y2,radius):从上一点开始绘制一条弧线，到（x2,y2）为止，而且以给定的半径radius穿过（x1,y1）。blog

bezierCurveTo(c1x,c1y,c2x,c2y,x,y):从上一点开始绘制一条曲线，到（x,y）为止，而且以（c1x,c1y）和（c2x,c2y）为控制点。ip

lineTo(x,y):从上一点开始绘制一条直线，到(x,y)为止。get

moveTo(x,y):将绘图游标移动到（x,y），不画线class

quadraticCurveTo(cx,cy,x,y):从上一点开始绘制一条二次曲线，到（x,y）为止，而且以（cx,cy）做为控制点。cli

rect(x,y,width,height):从点（x,y）开始绘制一个矩形，宽度和高度分别有width和height指定。这个方法绘制的是矩形路径，而不是strokeRect()和fillRect()所绘制的独立的形状。方法

建立了路径后，接下来有几种可能的选择，若是想绘制一条链接到路径起点的线条，能够调用closePath()。若是路径已经完成，你想用fillStyle填充它，能够调用fill()方法。另外，还能够调用stroke()方法对路径描边，描边使用的是strokeStyle。最后还能够调用clip()，这个方法能够在路径上建立一个剪切区域。im

举个例子，绘制一个不带数字的时钟表盘：样式

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

//肯定浏览器支持<canvas>元素

if(drawing.getContext){

   var context=drawing.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();

}

这个例子使用arc()方法绘制了两个圆形：一个外圆和一个内圆，构成了表盘的边框。外圆的半径是99像素，圆心位于点（100,100）,也是画布的中心点。为了绘制一个完整的圆形，咱们从0弧度开始，绘制2PI弧度（经过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已经很是稳定，能够利用它们结合不一样的填充和描边样式，绘制出很是复杂的图形来。