不同的fillStyle颜色在画布中的圆弧

Question

我想这个解决方案非常简单，如果这是很明显的事先道歉，但我似乎无法弄清楚如何为两个不同的弧设置两个不同的fillStyles。 ..我只是想能够绘制不同的色彩圈。下面我将介绍如何使用canvas中的其他形状/绘图方法来执行此操作，但出于某种原因使用圆弧会将两个圆弧都设置为最后一个fillStyle。

ctx.fillStyle = "#c82124"; //red 
ctx.arc(15,15,15,0,Math.PI*2,true); 
ctx.fill(); 

ctx.fillStyle = "#3370d4"; //blue 
ctx.arc(580,15,15,0,Math.PI*2,true); 
ctx.fill(); 

Answer 1

我想你错过了开始和结束的路径陈述。请尝试以下（我的作品中的jsfiddle，see here）

ctx.fillStyle = "#c82124"; //red 
ctx.beginPath(); 
ctx.arc(15,15,15,0,Math.PI*2,true); 
ctx.closePath(); 
ctx.fill(); 

ctx.fillStyle = "#3370d4"; //blue 
ctx.beginPath(); 
ctx.arc(580,15,15,0,Math.PI*2,true); 
ctx.closePath(); 
ctx.fill(); 

Answer 2

注意路径是仅几何图形。您随时可以设置.fillStyle直到fill()。