fillStyle màu sắc khác nhau cho arc trong vải

Question

Tôi tưởng tượng giải pháp này rất đơn giản, và xin lỗi trước nếu điều này là rõ ràng đau đớn, nhưng tôi dường như không thể tìm ra cách để đặt hai fillStyles khác nhau cho hai vòng cung khác nhau. .. Tôi chỉ muốn có thể vẽ các vòng tròn màu khác nhau. Dưới đây tôi có cách tôi thường làm điều đó với các phương thức vẽ/hình dạng khác trong canvas, nhưng vì một số lý do với vòng cung nó đặt cả hai cung cho fillStyle cuối cùng.

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

Tôi nghĩ bạn đang thiếu các câu lệnh về đường dẫn bắt đầu và kết thúc. Hãy thử những điều sau (nó hoạt động cho tôi trong 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

Lưu ý rằng đường dẫn chỉ là hình học. Bạn có thể đặt .fillStyle bất cứ lúc nào cho đến khi fill().