绘制线段
调用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()，就会一目了然看到这个缺口。
如对本文有疑问， 点击进行留言回复！！
我要评论
网友评论