【品牌网站建设解决方案】
cxt.lineWidth=”2”： ／／设置线条颜色
cxt.beginPath(); ／／设置线条宽度
cxt.moveTo(50，20); ／／定位绘图起点
cxt.lineTo(150，80); ／／第一条直线的终点坐标
cxt.lineTo(20，60); ／／第二条直线的终点坐标
cxt.closePath();／／封闭路径，使第一条直线的起点坐标与第二条直线的终点坐标闭合
cxt.stroke(); ／／绘制当前路径的边框
<／script>
<／body>
<／html>
【案例说明】本例中使用beginPath()方法初始化路径，第一次使用moveTo()方法改变当前绘画位置到cs0，20)，接着使用两次lineTo()方法绘制三角形的两边，最后使用closePathO关l’羽路径形成三角形的第三边。
·81·
3．绘制圆弧或圆
arc()方法使用一个中心点和半径，为一个画布的当前子路径添加一条弧，语法格式为：
arc(x,y, radius, startAngle, endAngle, counterclockwise)
其中的参数含义如下。
x，y：描述弧的圆形的圆心坐标。
radius:描述弧的圆形的半径。
startAngle，endAngle：沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来量，沿着x轴正半轴的三点钟方向的角度为0，角度沿着逆时针方向而增大。 i
counterclockwise：弧沿着圆周的逆时针方向(True)还是顺时针方向(False)遍历。
说明：这个方法的前5个参数指定了圆周的一个起始点和一个结束点。调用这个方法会在当前点和当前子路径的起始点之间添加一条直线。接下来，它沿着圆周在子路径的起始点和结束点之间添加弧。最后一个counterclockwise参数指定了圆应该沿着哪个方向遍历来连接起始点和结束点。
【案例5-11l绘制圆弧和圆。
【案例展示】本例文件5-ll.html在浏览器中的显示效果如图5-12所示。
【学习目标】掌握绘制圆弧和圆的方法。
【知识要点】掌握绘制圆弧和圆的相关方法和属性。
