首页 / H5教程

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

    作者:PHP中文网2018-09-15 15:55:48

    本篇文章给大家带来的内容是关于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()作用的实例解析的详细内容,更多请关注php中文网其它相关文章!

    标签:

PHP中文网

未登录