HTML5 绘制线段的方法

绘制线段

调用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 所示：

图4-5 绘制线段

说明：

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