我们继续修改我们的代码

function drawLine(){ //描边三角形 cxt.strokeStyle = 'green'; cxt.lineWidth = 2; cxt.beginPath(); cxt.moveTo(50, 50); cxt.lineTo(50, 150); cxt.lineTo(150, 150); cxt.closePath(); cxt.stroke(); //折线 cxt.translate(150, 0); cxt.strokeStyle = 'red'; cxt.lineWidth = 2; cxt.beginPath(); cxt.moveTo(50, 50); cxt.lineTo(50, 150); cxt.lineTo(150, 150); cxt.stroke(); cxt.closePath(); //绿色填充三角形 cxt.translate(150, 0); cxt.fillStyle = 'green'; cxt.lineWidth = 2; cxt.beginPath(); cxt.moveTo(50, 50); cxt.lineTo(50, 150); cxt.lineTo(150, 150); cxt.fill(); cxt.closePath(); //红色填充三角形 cxt.translate(150, 0); cxt.fillStyle = 'red'; cxt.lineWidth = 2; cxt.beginPath(); cxt.moveTo(50, 50); cxt.lineTo(50, 150); cxt.lineTo(150, 150); cxt.closePath(); cxt.fill(); }

从上面的例子我们可以看出closePath()的位置不同，也会影响我们的图形

注意：当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以此时closePath()函数不是必须的。

但是调用stroke()：如果你在stroke()方法之前只用closePath()会形成闭合路径，如果在stroke()方法之后调用closePath()方法，此时图形已经绘制完成，当前的绘制路径已经关闭，所以closePath()方法不起作用。

 

线段与像素边界

先来看一个例子

function drawLine(){ //描边三角形 cxt.lineWidth = 1; cxt.beginPath(); cxt.moveTo(50, 50); cxt.lineTo(450, 50); cxt.stroke(); cxt.beginPath(); cxt.moveTo(50.5, 150.5); cxt.lineTo(450.5, 150.5); cxt.stroke(); }

 

从图中我们可以看出，我们将两条线段的lineWidth都是设置为1像素，但是上面的线段画出的却是两像素。

 

如果你在某2个像素的边界处绘制一条1像素宽的线段，那么该线段实际会占据2个像素的宽度；

因为当你在像素边界处绘制一条1像素宽度的垂直线段时，canvas的绘图环境对象会试着将半个像素画在边界中线的右边，将另外半个像素画在边界中线的左边。

然而，在一个整像素的范围内绘制半个像素宽的线段是不可能的，所以在左右两个方向上的半个像素都被扩展为1个像素。

 

另外一方面，绘制在两个像素之间，这样的话，中线左右两端的那半个像素就不会延伸，它们结合起来恰好占据1个像素的宽度。所以说，如果要绘制一条真正1像素宽度的线段，你必须将该线段绘制在某两个像素之间

 

网格的绘制

既然我们已经明白了如何绘制真正的1像素的线段，那我们就开始绘制网格

function drawLine(stepx, stepy){ cxt.lineWidth = 0.5; cxt.strokeStyle = 'green'; (var i= stepx + 0.5; i< cxt.canvas.width; i+= stepx){ cxt.beginPath(); cxt.moveTo(i, 0); cxt.lineTo(i, cxt.canvas.height); cxt.stroke(); } (var i= stepy + 0.5; i< cxt.canvas.height; i+= stepy){ cxt.beginPath(); cxt.moveTo(0, i); cxt.lineTo(cxt.canvas.width, i); cxt.stroke(); } } drawLine(10, 10);

上面例子中我们将线段绘制在两个像素之间的像素上，而且绘制出来的线段仅有0.5像素宽，

虽说canvas规范没有明文规定，不过所有浏览器的Canvas实现都使用了“抗锯齿”技术，以便创建出“亚像素”线段的绘制效果来

 

总结

本节内容主要讲解canvas中路径中线性路径的绘制方法，主要是利用 moveTo()定义起点，lineTo()定义终点，stroke()描绘当前路径。这三个方法绘制线段

canvas中绘制路径有两个重要的方法，beginPath()与closePath()。绘制图形之前先调用beginPath()是绘制多个图形必要的步骤。

closePath()在使用fill()时是可以省略的，而且还要注意closePath()方法的调用位置。

绘制线段时我们可以使用 lineWidth改变线段的宽度，strokeStyle改变线段的颜色。

弄清楚线段的像素边界，这样我们才能绘制出真正的1像素线宽的线段。