little_little0_0通过本文主要向大家介绍了canvas-api等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
导语：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()并没有产生什么效果。