使用HTML5 Canvas绘制直线或折线等线条的方法讲解

1. <script type="text/javascript">    //获取Canvas对象(画布)   
2. var canvas = document.getElementById("myCanvas");    //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误   
3. if(canvas.getContext){          //获取对应的CanvasRenderingContext2D对象(画笔)   
4.     var ctx = canvas.getContext("2d");             
5.     //开始一个新的绘制路径        ctx.beginPath();   
6.     //设置线条颜色为蓝色        ctx.strokeStyle = "blue";   
7.     //设置路径起点坐标        ctx.moveTo(20, 50);   
8.     //定义中间点坐标1        ctx.lineTo(60, 50);   
9.     //定义中间点坐标2        ctx.lineTo(60, 90);   
10.     //定义中间点坐标3(这是最后一个中间点，也就是终点)        ctx.lineTo(100, 90);   
11.     //按照绘制路径顺序连接各个坐标点        ctx.stroke();   
12.     //关闭绘制路径        ctx.closePath();   
13. }    </script>  

对应的显示效果如下图：

掌握上述内容后，相信大家对使用Canvas绘制线条有一些基本的了解了吧。由于对线条的宽度、透明度等控制只是设置单个属性即可，请参考上面的相关API，这里就不再赘述了。

强烈注意：在绘制图形路径时，一定要先调用beginPath()。beginPath()方法将会清空内存中之前的绘制路径信息。如果不这样做，对于绘制单个图形可能没什么影响，但是在绘制多个图形时(例如上面示例的两条直线)，将会导致路径绘制或者颜色填充等操作出现任何意料之外的结果。
此外，对于closePath()方法，初学者一定要稍加注意，尤其是上面API表格中closePath()方法描述中的红色文字。在上面绘制折线的代码示例中，我们先调用了stroke()，再调用了closePath()。其实在调用stroke()方法时，折线就已经绘制好了，当前的绘制路径也就被关闭掉了，所以再调用closePath()方法时，它就不会使用直线连接当前端点和起始端点(也就是说，这里的closePath()是可有可无的，不过为了保持良好的习惯，还是建议写上)。如果我们交换一下stroke()和closePath()的调用顺序，则情况完全不一样了。由于closePath()先调用，此时绘制路径并没有关闭，那么closePath()将会用直线连接当前端点和起始端点。