4.2.2 绘制线段

优质

小牛编辑

136浏览

2023-12-01

调用lineTo()方法绘制线段。lineTo(x, y)方法把当前点和lineTo()方法指定的点(x, y)用线段连接起来。

如果要绘制多条线段，可以重复调用该方法。第一次调用，当前点为子路径的起点，以后每次调用，都会把上一次的终点作为本次的起点。我们使用lineTo()方法绘制两条平行线，代码如下：

context.lineWidth = 10;
context.strokeStyle = '#444';
      
context.beginPath();
context.moveTo(20, 20);
context.lineTo(220,20);     
context.stroke();
      
context.beginPath();
context.moveTo(20, 40);
context.lineTo(220,40);
context.stroke();

运行效果如图 4‑5 所示：

说明：

调用stroke()方法绘制封闭图形时，closePath()方法就显得尤为重要。在线条比较细的时候，还不易觉察，在线条比较粗的时候，就会看到，在路径的起点和终点交汇留下的缺口。如果删除上述代码的context.closePath()，就会一目了然看到这个缺口。