【如何自己建設(shè)網(wǎng)站】
2．繪制直線
(1) lineTo()方法
lineTo()方法用來繪制一條直線，語法格式為：
lineTo(x,y) {
x，y：直線終點的坐標(biāo)。 i
說明：lineTo()方法為當(dāng)前子路徑添加一條直線，這條直線從當(dāng)前點開始，到(x'y)結(jié)束。當(dāng)方法返回時，當(dāng)前點是(x，y)。
(2) moveTo()方法
在繪制直線時，通常配合moveTo()方法設(shè)置繪制直線的當(dāng)前位置，并開始一條新的子路徑，其語法格式為：
moveTo(x,y)
x，y：新的當(dāng)前點的坐標(biāo)。
說明：moveTo()方法將當(dāng)前位置設(shè)置為(x，y)，并用它作為第一點創(chuàng)建一條新的子路徑。如果之前有一條子路徑并且它包含剛才的那一點，那么從路徑中刪除該子路徑。
【案例5-9l繪制一條直線。
【案例展示】本例文件5-9.html在瀏覽器中的顯示效果如圖5-10所示。
【學(xué)習(xí)目標(biāo)】掌握繪制直線的方法。
【知識要點】掌握繪制直線的相關(guān)方法和屬性。
代碼如下：
<! doctype html>
<html>
<head>
<meta charset=”gb2312”>
<title>繪制直線<／title>
<／head>
照舞嬲鯔鍵
靜啼0∞魯
jj一1+j…～一一
＼∑
}-J
圖5-10頁面的顯示效果
<body>
<canvas id=”myCanvas”width=”200”height=”100”style=”border:lpx solid #c3c3c3;”>
您的瀏覽器不支持canvas元素．
<／canvas>
<script type=”text/javascript”>
var c=document.getElementById(”myCanvas”)； ／／獲取畫布對象
var cxt-c.getContext(”2d”)； ／／獲取畫布上繪圖的環(huán)境
cxt.moveTo(10，10); ／／定位繪圖起點
cxt.strokeStyle=”#OOOOff"; ／／設(shè)置線條顏色
cxt．lineWidth=”2”： ／／設(shè)置線條寬度
cxt.lineTo(150，50); ／／第一條直線的終點坐標(biāo)
cxt．lineTo(10，50); ／／第二條直線的終點坐標(biāo)
cxt.stroke(); ／／繪制當(dāng)前路徑的邊框
<／script>
</body>
</html>
