canvas中beginPath()和closePath()作用的实例解析-

?本篇文章给大家带来的内容是对于canvas中beginPath()和closePath()作用的实例解析，有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。 本篇文章给大家带来的内容是对于canvas中beginPath()和closePath()作用的实例解析，有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。

beginPath的作用很简略，就是开端一段新的途径，但在运用canvas画图的历程中却非常重要

先来看一小段代码：

var ctx=document.getElementById("canvas").getContext("2d");
    ctx.beginPath();
    ctx.rect(150,150,100,100);
    ctx.fillStyle="green";
    ctx.fill();
    ctx.rect(0,0,100,100);
    ctx.fillStyle="yellow";
    ctx.fill();

我们的代码没有差错，但得到的却是两个边长100px的黄色的正方形，而不是一绿一黄，这是为何呢？

事实上，canvas中的绘制办法（fill，stoke），都会以上一次“beginPath”之后的所有途径进行绘制，在上面的代码中首先个矩形fill了两次，首先次绿色，第二次黄色，所以得到了两个黄色矩形，一样的关于画线段，或其他曲线，图形，无论你moveTo到哪，只有你没有beiginPath，你都是在画一条途径。

要是你画的图形和你想象的纷歧致，记得查看一下beginPath

谈到beginPath就不得不提一下closePath，事实上两者并无关系，closePath的意思是关闭途径，不是完毕途径，它只是将途径的终点与起点相连，不是开端一个新途径。

我们在上面代码中首先个fill的背面增加一个closePath，得到的仍是两个黄色矩形。

但我们在背面增加一个beginPath，则得到两个不一样色彩的矩形。

总而言之，不要试图通过闭合一段途径来开端新的途径，并且要是你不闭合途径，即便开端新的途径，其也不会闭合。

以上就是canvas中beginPath()和closePath()作用的实例解析的细致内容，更多请关注 百分百源码网 其它相干文章！