Canvas中beginPath()和closePath()的剖析总结（附示例）-

?本篇文章给大家带来的内容是对于Canvas中beginPath()和closePath()的剖析总结（附示例），有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。

本篇文章给大家带来的内容是对于Canvas中beginPath()和closePath()的剖析总结（附示例），有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。

在学习H5新元素的时候，理解到了画布canvas：可以在网页中绘制所需要的图形；其中在刻画扇形图时发明了对于beginPath（）和closePath（）的题目，在接下来将会进行剖析和总结；

首先步：提画笔，点江山

《script》
    var canvas4= document.getElementById("canvas4");
    var content4 = canvas4.getContext("2d");
   
    content4.moveTo(200,150);
    content4.arc(200, 150, 100, 0, Math.PI * 0.3);
    content4.fillStyle = "black";
    content4.fill();
    
    content4.moveTo(200,150);
    content4.arc(200, 150, 100,Math.PI * 0.3,Math.PI * 0.7);
    content4.fillStyle = "yellow";
    content4.fill();
《script》

显示结果如图所示：
4：beginPath（）和closePath（）必需要成对涌现！由于你要是想通过闭合一段途径来开端新的途径那么开端的途径也不会是新的途径。

第二步：提笔，画江山

以点为面，增补，沉积成画；

《script》
    var canvas4= document.getElementById("canvas4");
    var content4 = canvas4.getContext("2d");
    content4.beginPath();
    content4.moveTo(200,150);
    content4.arc(200, 150, 100, 0, Math.PI * 0.3);
    content4.fillStyle = "black";
    content4.fill();
    content4.closePath();
    content4.beginPath();
    content4.moveTo(200,150);
    content4.arc(200, 150, 100,Math.PI * 0.3,Math.PI * 0.7);
    content4.fillStyle = "yellow";
    content4.fill();
    content4.closePath();
《script》

正常显示结果如图所示：

5：beginPath（）和closePath（）非常重要，要是你的canvas中的显示看起来不准确，请一定先检查可否准确的运用了beginPath（）和closePath（）；

以上就是Canvas中beginPath()和closePath()的剖析总结（附示例）的细致内容，更多请关注 百分百源码网 其它相干文章！