canvas（直线）

 canvas绘制基本图形，包括直线，矩形，圆等，复杂的图形都是由简单的图形组合而成。

1.直线

（1）实现效果

图1-1

（2）实现代码

图1-2

（3）附加知识

直线可以设置lineCap的值使直线两端的样式不同，"round" 和 "square" 会使线条略微变长：

1) butt默认。向线条的每个末端添加平直的边缘;

2) round向线条的每个末端添加圆形线帽;

3) square向线条的每个末端添加正方形线帽。

图1-3

代码：

otx.lineCap='butt';

otx.beginPath();//重置画笔，避免污染

otx.moveTo(10, 10);//路径起点（10,10）

otx.lineTo(180, 10);//路径到达位置（180, 10）

otx.stroke();//开始绘制图形

---

otx.lineCap='round';

otx.beginPath();//重置画笔，避免污染

otx.moveTo(10, 30);//路径起点（10,30）

otx.lineTo(180, 30);//路径到达位置（180, 30）

otx.stroke();//开始绘制图形

---

otx.lineCap='square';

otx.beginPath();//重置画笔，避免污染

otx.moveTo(10, 50);//路径起点（10, 50）

otx.lineTo(180, 50);//路径到达位置（180, 50）

otx.stroke();//开始绘制图形