弧线
创建弧线的方法不那么直观。第一种方法是通过两个坐标及一个半径来定义：context.arcTo(xl,yl,x2,y2,radius)如图0所示，arcT〇()创建了如下的新路径绘图：先为x〇/y〇到xl/yl然后到x2/y2的线添加有指定半径的圆，然后让此圆在两个特定点上与线形成开始切点tl及结束切点t2。这两点之间的弧线为路径的一部分，而结束切点t2成为新的当前点。
实际操作中，此方法常常用来创建圆角矩形，一个可循环使用的函数可以很方便的完成这项工作，如图1所示。
varroundedRect=function(x,y,w,h,r){context.beginPath();context.moveTo(x,y+r);context.arcTofx,y,x+w,y,r);context.arcTo(x+w,y,x+w,y+h^r^;context.arcToix+w,v+h,x,y+h,r);contextarcTo(x,y+fi,x,y,r);context.closePatn();context,stroke();}；7,roundedRect();roundedRect(900,0);
roundedRect(700,400,400,300,40)；roundedRect(0,10);roundedRectO里需要设置矩形及圆角半径的基本值，然后通过moveToO方法、4个arcTo〇方法及一个closePath()方法完成指定矩形的绘制。方法closePath()在这里首次登场，它的作用是将终点与起点闭合以完成矩形。
第二种创建弧线的方法arc〇眼看上去更为复杂。除了中心及半径外，我们还需要注明两个角及其旋转方向：
context.arc(x,y,radius,startAngle,endAngle,anticlockwise)的弧的中心点为一个拥有指定半径的圆心。从此中心点出发，向startAngle及endAngle两个角度产生了两条切线，在圆弧上产生了两个交点。在这两个坐标点之间的弧方向由anticlockwise决定，0为顺时针，1为逆时针。
总的来说就是，从圆心xO/yO开始，在直线方向上与圆产生第一个交点spx/spy，并由此开始绘制出一段结束于终点epx/epy的弧线，而终点epx/epy就此成为新的当前点。
绘制弧线过程中的一个难点是所有角度的标注单位为半径而非度数，因此我们在这里简单地了解一下如何转化：
vardeg2rad=function(deg){returndeg*(Math.PI/);}；让我们再举例两个辅助函数，分别用来绘制圆形及扇形。对于圆形来说，我们仅需要用到中心点及半径，其他则由drcle()函数解决：
varcircle=function(cx.cy,r){context.moveTo(cx+r〉cy);context.arc(cx,cy,r,0,Math.PI*);}；对于圆形图表来说(又称饼图)，很难直观得出指定弧度的角度。函数sectorO正好可以处理这些小问题，让我们可以方便的指定开始及结束的角度数。
varsector=function(cx,cy,r〉
startAngle,endAngle,anticlockwise
context.moveTo(cx,cy);context.arc(cx，cy山startAngle*(Math.PI/),endAngle*(Math.PI/l8),
anticlockwise
);
context.closePath();
}；
现在，在不丢失轨迹的情况下只需要几小行代码就能够画出圆形和饼图了：
contextbeginPath();circledBOO,50)；circlet0);circlet〇〇,60);sector(9〇〇〇,25〇,-9〇〉B〇,〇)；sector(9〇〇,8,0)；sector(〇〇,)；context.strokeQ;矩形与其他方法不同，方法rectO更像是辅助函数：context.rect(x,y,w,h)和此前的路径绘制方法相反，使用rectO绘制时会忽略当前点xO/yO,取而代之的是，矩形将由参数x,y,宽度w及高度h所定义。原点x/y在绘制完成后将成为新的当前点。
轮廓、填充及剪切遮罩
让我们回顾一下初始化并完成路径绘图的3个步骤一定义路径、几何构图、绘制一我们现在面临的就是第三步同时也是最后一步：绘制。我们将在这一步决定路径的外观。在所有此前的案例中，我们都选择了通过以下方法绘制简单轮廓：context.stroke()线条颜色由属性strokeStyle决定，你也可以用另外3个Canvas属性定义线条粗细(lineWidth)、线条两端的线端(lineCap)，以及线条与线条之间的交点(lineJoin)(星号用来标记默认值，我们以后还会经常用到它)：
context.lineWidth=[Pixel]
context.lineCap=[buttjround,square]
context.lineDoin=[bevel,round,*miter]
属性宽度、终点及交点的示例。
lineWidth单位是像素，默认为。像其他两个line属性一样，线条粗细不仅作用于线条及多边形，同时也作用于由strokeRectO创建的矩形。
若需用lineCap为线条端部加上线端，可以采用的有靶形、圆形及方形，默认值为靶形。若我们选择圆形，则在线条两端加上半圆，并使用线粗的一半作为半径，从而为线条端部加上圆形端。若选择方形，一个高度为线粗一半的矩形将取代之前提到的半圆。
在创建平角交点时，lineJoin要设为bevel,同样我们也可以在用round来创建圆角，或者用默认值miter来创建尖角交点。为避免相交锐角角度过小，规范将属性miterUmit的默认值定义为1,也就是线粗一半的锥点长度(线条交点及端点之间的距离)。若miterLimit超出默认范围，
宁波网站建设认为该点将被削平，从而得到与bevel同样的效果。
本文由乐华网络编辑，转载请注明出处
宁波网站建设www.leseo.net
