在路径绘制不同颜色的形状（HTML5画布/ JavaScript）的

我想画充满了不同的颜色在路径绘制不同颜色的形状（HTML5画布/ JavaScript）的

 //-------------- draw 
     ctx.beginPath(); 
     ctx.fillStyle = "black"; 
     ctx.arc(30, 30, 20, 0, Math.PI*2, true); 
     ctx.fill(); 
     ctx.fillStyle = "red"; 
     ctx.arc(100, 100, 40, 0, Math.PI*2, true); 
     ctx.fill(); 
     ctx.closePath();

多个圆弧这将产生两个电弧用红色填充，我可以告诉大家，围绕较小的一个有一个微弱的黑色轮廓。

enter image description here

任何人都了解我如何能做到这一点一些轻？我做错了什么？

来源

2011-08-25 jondavidjohn

当你关闭路径，我相信它会把它们都画出来（黑色的在红色的下面，对于小的圈）。 – alex

好问题，我只是想知道这一点，你的问题和答案帮助我。谢谢！ – Emanegux

关闭路径，然后重新打开它。

ctx.closePath(); 
ctx.beginPath();

jsFiddle。

...之间的弧线绘制代码。

来源

2011-08-25 02:35:23 alex

'closePath'不会结束路径声明，它只是一个'moveTo（firstDeclaredCoordinates）'。 – Kaiido

-2

的路径与beginPath方法开始，以endPath结束。之间的每件事都是一样的道路。你甚至可以用翅膀的规则画出带有洞的路径。在一个方向绘制某些东西，而在另一个方向绘制其他东西，但在第一个东西的内部让我们用线在中间画一个带有洞的矩形。 beginPath（）; moveTo（10,10）; lineTo（100,10）; 了lineTo（（100,60）; 了lineTo（10,60）; 了lineTo（10,10）; closePath（）; 的moveTo（20,20）; 了lineTo（20,50）; 了lineTo（90 ，50）; 了lineTo（90,20）; 了lineTo（20,20）; closePath（）; endPath（）; 填充（）;

你可以与任何形状做这个尝试的弧。在一个方向，然后在另一个相反的方向使用较小的半径

来源

2016-10-09 01:41:29 neticous

'endPath's不存在于canvas2D API中，'closePath'不会结束路径声明，它只是一个'moveTo（firstDeclaredCoordinates）'。 – Kaiido

我的不好，删除结束的路径。 beginPath方法（）; moveTo（10,10）;了lineTo（100,10）; lineTo（（100,60）; lineTo（10,60）; lineTo（10,10）; closePath（）; moveTo（20,20）; lineTo（20,50）; lineTo（90,50）; lineTo（90 ，20）; lineTo（20,20）; closePath（）; fill（）; – neticous

但是，当closePath尚未使用时，我在某些浏览器上看到填充泄漏。 – neticous

在路径绘制不同颜色的形状（HTML5画布/ JavaScript）的

回答

相关问题