【如何自己建设网站】
2．绘制直线
(1) lineTo()方法
lineTo()方法用来绘制一条直线，语法格式为：
lineTo(x,y) {
x，y：直线终点的坐标。 i
说明：lineTo()方法为当前子路径添加一条直线，这条直线从当前点开始，到(x'y)结束。当方法返回时，当前点是(x，y)。
(2) moveTo()方法
在绘制直线时，通常配合moveTo()方法设置绘制直线的当前位置，并开始一条新的子路径，其语法格式为：
moveTo(x,y)
x，y：新的当前点的坐标。
说明：moveTo()方法将当前位置设置为(x，y)，并用它作为第一点创建一条新的子路径。如果之前有一条子路径并且它包含刚才的那一点，那么从路径中删除该子路径。
【案例5-9l绘制一条直线。
【案例展示】本例文件5-9.html在浏览器中的显示效果如图5-10所示。
【学习目标】掌握绘制直线的方法。
【知识要点】掌握绘制直线的相关方法和属性。
代码如下：
<! 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”)； ／／获取画布上绘图的环境
cxt.moveTo(10，10); ／／定位绘图起点
cxt.strokeStyle=”#OOOOff"; ／／设置线条颜色
cxt．lineWidth=”2”： ／／设置线条宽度
cxt.lineTo(150，50); ／／第一条直线的终点坐标
cxt．lineTo(10，50); ／／第二条直线的终点坐标
cxt.stroke(); ／／绘制当前路径的边框
<／script>
</body>
</html>
