Canvas学习：绘制线段(2)_H5之家 - 中国HTML5教程资源分享第一站

此外，对于 closePath() 方法，初学者一定要稍加注意。在上面绘制折线的代码示例中，我们先调用了 stroke() ，再调用了 closePath() 。其实在调用 stroke() 方法时，折线就已经绘制好了，当前的绘制路径也就被关闭掉了，所以再调用 closePath() 方法时，它就不会使用直线连接当前端点和起始端点(也就是说，这里的 closePath() 是可有可无的，不过为了保持良好的习惯，还是建议写上)。如果我们交换一下 stroke() 和 closePath() 的调用顺序，则情况完全不一样了。由于 closePath() 先调用，此时绘制路径并没有关闭，那么 closePath() 将会用直线连接当前端点和起始端点。

来看下面这段代码，一条路径是 stroke() 在 closePath() 前面（红色折线）；另一条路径是 stroke() 在 closePath() 后面（蓝色折线）：

function drawScreen () { ctx.strokeStyle = 'red'; ctx.lineWidth = 4; ctx.beginPath(); ctx.moveTo(50, 10); ctx.lineTo(150, 10); ctx.lineTo(150,200); ctx.lineTo(200,200); ctx.lineTo(200,150); ctx.stroke(); ctx.closePath(); ctx.strokeStyle = 'blue'; ctx.beginPath(); ctx.moveTo(250, 10); ctx.lineTo(350,10); ctx.lineTo(350,200); ctx.lineTo(400,200); ctx.lineTo(400,150); ctx.closePath(); ctx.stroke(); }

Canvas学习：绘制线段

很明显，红色的终点和起点没连在一起，而蓝色的则连起来了。

对于上面的这种多条线段（路径），如果我们在代码中添加一个 fill() ，这个时候效果就不是线条效果了，而是线条起点和终点连起来的一个图形：

function drawScreen () { ctx.strokeStyle = 'red'; ctx.lineWidth = 4; ctx.beginPath(); ctx.moveTo(50, 10); ctx.lineTo(150, 10); ctx.lineTo(150,200); ctx.lineTo(200,200); ctx.lineTo(200,150); ctx.stroke(); ctx.fill(); ctx.closePath(); ctx.strokeStyle = 'blue'; ctx.beginPath(); ctx.moveTo(250, 10); ctx.lineTo(350,10); ctx.lineTo(350,200); ctx.lineTo(400,200); ctx.lineTo(400,150); ctx.closePath(); ctx.stroke(); ctx.fill(); }

Canvas学习：绘制线段

同时，在上例的基础上，如果把 strokeStyle 换成 fillStyle ，同时删除代码中的 stroke() 。效果又不一样：

function drawScreen () { ctx.fillStyle = '#ddaae2'; ctx.lineWidth = 4; ctx.beginPath(); ctx.moveTo(50, 10); ctx.lineTo(150, 10); ctx.lineTo(150,200); ctx.lineTo(200,200); ctx.lineTo(200,150); ctx.fill(); ctx.closePath(); ctx.beginPath(); ctx.moveTo(250, 10); ctx.lineTo(350,10); ctx.lineTo(350,200); ctx.lineTo(400,200); ctx.lineTo(400,150); ctx.closePath(); ctx.fill(); }

Canvas学习：绘制线段

这个时候，不管是 fill() 在 closePath() 前后，最终看到的效果都是一样的。也就是说 fill() 会把路径填充成一个图形。

简单小结一下在html5 Canvas中绘制直线只需要使用 [CanvasRenderingContext2D](//developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D) 对象的几个属性和方法即可轻松实现。属性或方法基本描述 strokeStyle 用于设置画笔绘制路径的颜色、渐变和模式 lineWidth 定义绘制线条的宽度 beginPath() 开始一个新的绘制路径 moveTo(x,y) 移动画笔到指定的坐标点 (x,y) ，该点就是新的子路径的起始点 lineTo(x,y) 使用直线边接当前端点和指定的坐标点 (x,y) stroke() 沿着绘制路径的坐标点顺序绘制直线 closePath() 如果当前的绘制路径是打开的，则关闭掉该绘制路径

在Canvas的图形绘制过程中，几乎都是先按照一定顺序先定下几个坐标点，也就是所谓的绘制路径，然后再根据我们的需要将这些坐标点用指定的方式连接起来，就形成了我们所需要的图形。当我们了解了 CanvasRenderingContext2D 对象的上述API后，那么绘制线条就显得非常简单了。

线段与像素边界

这是绘制线段的一个小细节。在说这个细节之前，咱们先来看一个小示例，就是绘制两条简单的直线。

function drawScreen () { ctx.strokeStyle = 'red'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(350, 50); ctx.stroke(); ctx.beginPath(); ctx.moveTo(50.5, 100.5); ctx.lineTo(350.5,100.5); ctx.closePath(); ctx.stroke(); }

Canvas学习：绘制线段