绘制直线

在了解 如何绘制 canvas 里唯一的基本形状——矩形 之后，现在可以转入使用路径了。路径不仅仅是线条，只是习惯性的会从线条开始，而直线可算是最简单的线条了。

使用路径，是有套路的。

创建、绘制、关闭和填充或者勾勒形状。

beginPath()
// actual drawing
closePath()
stroke()
fill()

两点确定一条直线，在 canvas 里也不例外的。

lineTo(x, y)

x, y 只是终点的坐标，起点坐标是隐含的，并且取决于前一操作。简单来说，上一操作的终点就是当前直线的起点。新建 canvas 时起点就是原点。另外还可以通过这个方法：

moveTo(x, y)

来移动起始坐标。moveTo 顾名思义就是移动坐标用的，它一般用于重设起始坐标，大多数情况下路径都不是起于原点的，而且在绘制一些不连续的路径时非常有用。

var x = 60;
var y = 20;
var r = 40;
var dy = Math.sqrt((r*2)*(r*2)-r*r);

ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x-r, y+dy);
ctx.lineTo(x+r, y+dy);
ctx.fill();

var y = y + 2*(Math.sqrt(4/3)*r);

ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x-r, y-dy);
ctx.lineTo(x+r, y-dy);
ctx.closePath();
ctx.stroke(); 

上面的代码绘制出六角星，moveTo 这里是移动起始坐标又用于创建两条不连续的三角路径。

三角几何的内容就不解析了，重点是使用填充和描边的区别。填充是会触发路径的自动闭合的，而描边则不会。

这里可以看出在这个套路里 closePath 不是必须的。如果描边之前不闭合路径，所勾画出来的将会是开放的路径，在这个案例里就是只画两边。