beginPath()和closePath()

beginPath()和closePath()

导语：beginPath()方法和closePath()是取得上下文对象的两个方法.

  beginPath()方法就是告诉画布：“我要开始画啦，快把之前的都清除掉！”如果之前并没有画任何内容，则以下两段代码显示的效果没有什么不同:

//将光标移到合适位置
context.moveTo(10, 10);
//画线
context.lineTo(100, 100);
//描边
context.strokeStyle = "green";
context.lineWidth = "5";
context.stroke();

context.beginPath();
//将光标移到合适位置
context.moveTo(10, 10);
//画线
context.lineTo(100, 100);
//描边
context.strokeStyle = "green";
context.lineWidth = "5";
context.stroke();

以上代码中的的context.stroke()方法是用来描边的，如果没有，则不会显示出任何内容。

closePath()方法与之前有没有beginPath()无关，如果之前画出了一些路径，closePath()将最近画出的一条路径闭合。

//使用context绘制
context.beginPath();
//将光标移到合适位置
context.moveTo(10, 10);
//画线
context.lineTo(100, 100);
context.lineTo(10, 100);

context.moveTo(200, 200);
context.lineTo(300, 300);
context.lineTo(100, 300);

context.closePath();

//描边
context.strokeStyle = "green";
context.lineWidth = "5";
context.stroke();

上述代码先画出一段折线，然后改变游标位置再画出一段折线，closePath()会将第二段折线闭合，形成一个三角形。

//使用context绘制
context.beginPath();
//将光标移到合适位置
context.moveTo(10, 10);
//画线
context.lineTo(100, 100);
context.lineTo(10, 100);

context.moveTo(200, 200);
context.lineTo(300, 300);

context.closePath();

//描边
context.strokeStyle = "green";
context.lineWidth = "5";
context.stroke();

上述代码也会先画出一段折线，然后改变游标位置，画出一天直线，直线无法闭合，故closePath()并没有产生什么效果。