画布中beginPath()和closePath()的示例分析

这篇文章主要介绍了画布中beginPath()和closePath()的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

& lt; script> 　　,,,var  canvas4=, . getelementbyid (“canvas4"); 　　,,,var  content4 =, canvas4.getContext (“2 d"); 　　,, 　　,,,content4.moveTo (200150); 　　,,,content4.arc (200,, 150,, 100,, 0,, Math.PI  *, 0.3); 　　,,,content4.fillStyle =,“black"; 　　,,,content4.fill (); 　　,,,, 　　,,,content4.moveTo (200150); 　　,,,content4.arc(200,, 150,, 100年,Math.PI  *, 0.3, Math.PI  *, 0.7); 　　,,,content4.fillStyle =,“yellow"; 　　,,,content4.fill (); 　　& lt;/script>

显示效果如图所示:

<强>分析:
从显示效果上可以看的出,根本没有显示出应该有的效果;第一块应该是黑色,第二块应该是黄色。
此时需要提及beginPath和closePath的重要作用了;
不着急我们先一步一步分析为什么需要上面两个方法:
1:函数(x, y)表示移动画笔到(x, y)位置,同时也是定义线条开始的位置,如果没有移至方法,那么就连扇形也不是了,直接是一个小月牙;
显示效果如图所示:

2:在使用帆布进行绘制的时候,画笔每一次都是从beginPath()开始绘制的,如果在当前起点找不到就继续向上找,直到找到为止,然后从beginPath()之后开始绘制,因此这才会出现上述的前一个扇形被后一个扇形所覆盖,只留下一个黑边在苦苦挣扎,_ - - - - - -
3: fillRect()和storkeRect()这种画出独立区域的方法,也不能打断当前路径,也就是说,他也不能够替代closePath()【关闭路径】的作用;
4: beginPath()和closePath()必须要成对出现!因为你如果想通过闭合一段路径来开始新的路径那么开始的路径也不会是新的路径。

第二步:提笔,画江山

以点为面,补充,堆积成画;