本篇文章给人人带来的内容是关于Canvas中beginPath()和closePath()的剖析总结（附示例），有肯定的参考价值，有需要的朋侪能够参考一下，愿望对你有所协助。
在进修H5新元素的时刻，相识到了画布canvas：能够在网页中绘制所需要的图形；个中在描写扇形图时发现了关于beginPath（）和closePath（）的题目，在接下来将会举行剖析和总结；
第一步：提画笔，点山河
<!--html代码--> <canvas id="canvas4" width="400px" height="300px"></canvas>
<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>
显现结果如图所示：
剖析：
从显现结果上能够看出，基础没有显现出应当有的结果；第一块应当是黑色，第二块应当是黄色。
此时需要说起beginPath和closePath的重要作用了；
不着急我们先一步一步剖析为何需要上面两个要领：
1：moveTo(x,y)示意挪动画笔到（x，y）位置，同时也是定义线条最先的位置，假如没有moveTo要领，那末就连扇形也不是了，直接是一个小新月；
显现结果如图所示：
2：在运用canvas举行绘制的时刻，画笔每一次都是从beginPath（）最先绘制的，假如在当前出发点找不到就继承向上找，直到找到为止，然后从beginPath（）以后最先绘制，因而这才会涌现上述的前一个扇形被后一个扇形所掩盖，只留下一个黑边在苦苦挣扎 -_-
3：fillRect()和storkeRect() 这类画出自力地区的要领，也不能打断当前途径，也就是说，他也不能够替换closePath（）【封闭途径】的作用；
4：beginPath（）和closePath（）必需要成对涌现！由于你假如想经由过程闭合一段途径来最先新的途径那末最先的途径也不会是新的途径。
第二步：提笔，画山河
以点为面，补充，堆积成画；
<!--html代码--> <canvas id="canvas4" width="400px" height="300px"></canvas>
<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>
一般显现结果如图所示：
关于画布的注意事项
1：画布的默许宽高是300 * 150 ；
2：想要设置画布的宽高就必需运用行内属性来举行设置，而不是style；不然就算是从视觉上转变了画布的尺寸，他实际上照样不会转变，内里的内容就会发生变形；
3：在canvas上画之前肯定要先创建出context上下文对象以后再运用context对象挪用画布的属性和要领举行支配；
4：canvas中没有画圆形的要领或许属性，但存在画弧线的要领arc（），能够用它来画一个2PI的扇形即圆；
5：beginPath（）和closePath（）非常重要，假如你的canvas中的显现看起来不准确，请肯定先搜检是不是准确的运用了beginPath（）和closePath（）；
以上就是Canvas中beginPath()和closePath()的剖析总结（附示例）的细致内容，更多请关注ki4网别的相干文章！
