【品牌網(wǎng)站建設(shè)解決方案】
cxt.lineWidth=”2”： ／／設(shè)置線條顏色
cxt.beginPath(); ／／設(shè)置線條寬度
cxt.moveTo(50，20); ／／定位繪圖起點(diǎn)
cxt.lineTo(150，80); ／／第一條直線的終點(diǎn)坐標(biāo)
cxt.lineTo(20，60); ／／第二條直線的終點(diǎn)坐標(biāo)
cxt.closePath();／／封閉路徑，使第一條直線的起點(diǎn)坐標(biāo)與第二條直線的終點(diǎn)坐標(biāo)閉合
cxt.stroke(); ／／繪制當(dāng)前路徑的邊框
<／script>
<／body>
<／html>
【案例說明】本例中使用beginPath()方法初始化路徑，第一次使用moveTo()方法改變當(dāng)前繪畫位置到cs0，20)，接著使用兩次lineTo()方法繪制三角形的兩邊，最后使用closePathO關(guān)l’羽路徑形成三角形的第三邊。
·81·
3．繪制圓弧或圓
arc()方法使用一個(gè)中心點(diǎn)和半徑，為一個(gè)畫布的當(dāng)前子路徑添加一條弧，語法格式為：
arc(x,y, radius, startAngle, endAngle, counterclockwise)
其中的參數(shù)含義如下。
x，y：描述弧的圓形的圓心坐標(biāo)。
radius:描述弧的圓形的半徑。
startAngle，endAngle：沿著圓指定弧的開始點(diǎn)和結(jié)束點(diǎn)的一個(gè)角度。這個(gè)角度用弧度來量，沿著x軸正半軸的三點(diǎn)鐘方向的角度為0，角度沿著逆時(shí)針方向而增大。 i
counterclockwise：弧沿著圓周的逆時(shí)針方向(True)還是順時(shí)針方向(False)遍歷。
說明：這個(gè)方法的前5個(gè)參數(shù)指定了圓周的一個(gè)起始點(diǎn)和一個(gè)結(jié)束點(diǎn)。調(diào)用這個(gè)方法會(huì)在當(dāng)前點(diǎn)和當(dāng)前子路徑的起始點(diǎn)之間添加一條直線。接下來，它沿著圓周在子路徑的起始點(diǎn)和結(jié)束點(diǎn)之間添加弧。最后一個(gè)counterclockwise參數(shù)指定了圓應(yīng)該沿著哪個(gè)方向遍歷來連接起始點(diǎn)和結(jié)束點(diǎn)。
【案例5-11l繪制圓弧和圓。
【案例展示】本例文件5-ll.html在瀏覽器中的顯示效果如圖5-12所示。
【學(xué)習(xí)目標(biāo)】掌握繪制圓弧和圓的方法。
【知識(shí)要點(diǎn)】掌握繪制圓弧和圓的相關(guān)方法和屬性。
