在上一篇介绍Canvas坐标系统的结尾处，我们使用了Canvavs绘制了一个网格。整个效果是由直线和文本构成。在这一节中，我们来看看如何使用Canvas绘制线段。

在Canvas中，线段也是路径中的一种，被称之为 线性路径 。在Canvas中绘制线性路径主要用到 moveTo(x,y) 、 lineTo(x,y) 和 stroke() 几个方法。

先画一条简单的直线

Canvas画一下直线非常的容易。众所周之，两点就能构成一条直线。使用两个API就可以： moveTo() 告诉你把画笔移到Canvas画布中的某个位置（直线的起点），然后通过 lineTo() 把画笔移到另一个点。从而两个点构成一条直线。

function drawScreen () { ctx.moveTo(50, 10); ctx.lineTo(350, 100); }

但这样在画布看不到任何的线条。如果需要看到效果，还需要使用 stroke() 方法：

function drawScreen () { ctx.moveTo(50, 10); ctx.lineTo(350, 100); ctx.stroke(); }

是不是很简单，通过这三个方法就可以绘制出一条线段。

moveTo(x,y) ：移动画笔到指定的坐标点 (x,y) ，该点就是新的子路径的起始点。该方法并不会从当前路径中清除任何子路径 lineTo(x,y) ：使用直线连接当前端点和指定的坐标点 (x,y) 。 stroke() ：沿着绘制路径的坐标点顺序绘制直线 改变线段宽度

我们在实际绘制线段时，总是有粗细的情况发生。那么在Canvas中可以通过 lineWidth 来改变绘制线段的粗细。比如：

function drawScreen () { ctx.lineWidth = 10; // 改变线的粗细 ctx.moveTo(50, 10); // 起始点 ctx.lineTo(350, 100); // 第二点(如果是一条直线的话，就是终点) ctx.stroke(); }

lineWidth 主要用来定义绘制线条的宽度。默认值是 1.0 ，并且这个属性必须大于 0.0 。较宽的线条在路径上居中，每边各有线条宽的一半。

改变线段的颜色

既然能改为线段的粗细，那必然能改变线段的颜色。在Canvas中可以通过 strokeStyle 来改变线段的颜色：

function drawScreen () { ctx.lineWidth = 10; ctx.strokeStyle = '#f36'; ctx.moveTo(50, 10); ctx.lineTo(350, 100); ctx.stroke(); }

strokeStyle 主要用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个 CanvasGradient 对象或者 CanvasPattern 对象。

也就是说，我们也可以绘制渐变色的线段：

function drawScreen () { // 创建一个表示线性颜色渐变的CanvasGradient对象， // 并设置该对象的作用区域就是线段所在的区域 var canvasGradient = ctx.createLinearGradient(50, 50, 250, 50); //在offset为0的位置(即起点位置)添加一个蓝色的渐变 canvasGradient.addColorStop(0, "blue"); //在offset为0.2的位置(线段左起20%的位置)添加一个绿色的渐变 canvasGradient.addColorStop(0.2, "green"); //在offset为0的位置(即终点位置)添加一个红色的渐变 canvasGradient.addColorStop(1, "red"); //将strokeStyle的属性值设为该CanvasGradient对象 ctx.strokeStyle = canvasGradient; ctx.lineWidth = 10; ctx.moveTo(50, 10); ctx.lineTo(350, 100); ctx.stroke(); }

CanvasGradient 接口表示描述渐变的不透明对象。通过 CanvasRenderingContext2D.createLinearGradient() 或 CanvasRenderingContext2D.createRadialGradient() 的返回值得到。

如此一来，是不是可以画具有纹理的线段呢？思考一下，你就会有答案。

beginPath()和closePath()

前面也说过了，线段也是线性路径中的一种。有开始也会有结束。其实在Canvas中具有两个方法： beginPath() 和 closePath() 。

beginPath() ：开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法。它将重置内存中现有的路径 ：如果当前的绘制路径是打开的，则关闭掉该绘制路径。此外，调用该方法时，它会尝试用直线边接当前端点与起始端点来关闭路径，但如果图形已经关闭（比如先调用 stroke() ）或者只有一个点，它会什么都不做。

在Canvas中绘制路径，最好加上 beginPath() 和 closePath() 。配合 lineTo() 不同点，我们可以绘制不同的路径。

function drawScreen () { ctx.strokeStyle = '#f36'; 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(); }

把上面的代码稍做修改：

function drawScreen () { ctx.strokeStyle = '#f36'; ctx.lineWidth = 4; ctx.beginPath(); ctx.moveTo(50, 10); ctx.lineTo(150, 10); ctx.lineTo(150,200); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.moveTo(200,200); ctx.lineTo(200,150); ctx.stroke(); ctx.closePath(); }

你在效果中可以看到，这个示例，我们是绘制了两个路径。

特别提醒：在绘制图形路径时，一定要先调用 beginPath() 。 beginPath() 方法将会清空内存中之前的绘制路径信息。如果不这样做，对于绘制单个图形可能没什么影响，但是在绘制多个图形时(例如上面示例的两条直线)，将会导致路径绘制或者颜色填充等操作出现任何意料之外的结果。