用Canvas绘制线段（2）

用Canvas绘制线段（2）

方法介绍

• ctx.moveTo(x,y)

用于移动画笔到(x,y)坐标处，并以此为路径起点进行绘图

• ctx.lineTo(x,y)

指定路径的下一个点的坐标，表示使用直线连接该点与上一个点

• ctx.stroke()

绘制路径

• ctx.lineWidth=20;

设置线段宽度，默认值为1px，较宽的线条在路径上居中，路径上下两边各有线宽的一半

• ctx.strokeStyle=’red’

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

下面通过绘制一条线段来体验上述几个方法属性

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.moveTo(10, 10);
ctx.lineTo(100, 100);
ctx.lineWidth = 20;
ctx.strokeStyle = 'orange';
ctx.stroke();

如果不进行‘ctx.stroke()’操作，那么线段不会被绘制出来，因为‘ctx.moveTo(10, 10);与ctx.lineTo(100, 100);’仅仅确定了你想要绘制的线段的路径，而并不是实际去画，路径确定后需要通过stroke()将路径描出来

ctx.closePath()

用于闭合当前路径。即将当前路径的起点与终点连起来形成一个闭合区域

ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.lineTo(100, 100);
ctx.stroke();
/*上述路径并不会闭合*/

ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.stroke();
/*加入closePath后路径闭合*/

注意：如果我将‘ctx.closePath();’与‘ctx.stroke();’交换调用次序

ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.lineTo(100, 100);
ctx.stroke();
ctx.closePath();

你会发现路径不闭合了？

这是因为：一旦调用stroke方法，那么就相当于你告诉系统——这个路径我已经绘制完了，请你给我将这个路径描出来，既然你路径都已经绘制好了，那么系统也就将绘制路径这个操作关闭了，然后再执行描路径操作，路径描完后，等待下一次绘制路径的操作。所以当你调用closePath时，绘制路径操作已经关闭，因此你也就不能将路径闭合了

还有一点

ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.lineTo(100, 100);
ctx.lineTo(10,10);
ctx.lineWidth=20;
ctx.stroke();

当我们试图通过lineTo使路径回到起始点，从而形成一个封闭图形时，发现一旦线条太宽，那么就会缺角，这是我们用closePath解决这个问题

ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.lineTo(100, 100);
ctx.lineTo(10,10);
ctx.lineWidth=20;
ctx.closePath();
ctx.stroke();

ctx.fill()

配套该有‘ctx.fillStyle=’red’’来设置填充色

用于填充路径——如果所绘制的路径本身已经闭合，那么填充路径所围成的闭合区域；如果路径没有闭合，那么该方法自动将路径的起点与终点连起来(形式上连起来，实际并没有)在形式上形成一个闭合区域并填充这个闭合区域

ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.lineTo(100, 100);
ctx.fillStyle="purple";
ctx.fill();

上述路径未闭合，则fill在形式上将其闭合并填充

ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.fillStyle="purple";
ctx.fill();

上述路径闭合，直接填充

其可以与stroke一起使用——用stroke描边，用fill填充。还要注意，无论fill在stroke之前还是之后调用都有效，因为其是填充，与绘制路径操作是否关闭无关

beginPath()

开始一个新的路径

/*绘制第一条线*/
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.strokeStyle = 'orange';
ctx.stroke();

/*绘制第二条线*/
ctx.moveTo(100, 200);
ctx.lineTo(200, 200);
ctx.strokeStyle = 'red';
ctx.stroke();

我们发现，第一、二条线都变为了1红色？

因为：虽然在绘制第二条线时，用moveTo重新设置了路径的起点，但是实际上，这条路径与第一条线依旧属于同一路径，所以他们动用red等路径信息。

要想使第二条线在新的路径绘制，与第一条线相分割，那么请使用beginPath

/*绘制第一条线*/
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.strokeStyle = 'orange';
ctx.stroke();

/*绘制第二条线*/
ctx.beginPath();
ctx.moveTo(100, 200);
ctx.lineTo(200, 200);
ctx.strokeStyle = 'red';
ctx.stroke();

看下一篇——用Canvas绘制矩形（3）