当前位置 : 主页 > 网页制作 > html5 >

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

来源:互联网 收集:自由互联 发布时间:2021-08-11
本篇文章给大家带来的内容是关于canvas中beginPath()和closePath()作用的实例解析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 beginPath的作用很简单,就是开始一段
本篇文章给大家带来的内容是关于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()作用的实例解析的详细内容,更多请关注自由互联其它相关文章!

网友评论