Vẽ hình dạng màu khác nhau trong một đường dẫn (HTML5 Canvas/Javascript)

Question

Tôi đang cố gắng để vẽ nhiều vòng cung vòng tròn đầy màu sắc khác nhau

 //-------------- 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(); 

này tạo ra cả hai vòng cung điền với màu đỏ, và tôi có thể nói rằng có một đường viền màu đen mờ nhạt xung quanh đường viền nhỏ hơn.

Mọi người có thể làm sáng tỏ cách tôi có thể thực hiện việc này không? những gì tôi đang làm sai?

Answer 1

Đóng đường dẫn và sau đó mở lại.

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

jsFiddle.

... giữa mã bản vẽ vòng cung.

Answer 2

Đường dẫn bắt đầu bằng startPath và kết thúc bằng endPath. Mọi thứ ở giữa đều giống nhau. Bạn thậm chí có thể vẽ các đường dẫn có lỗ hổng trong chúng bằng cách sử dụng các quy tắc cánh. Vẽ một cái gì đó theo một hướng và cái gì đó theo hướng ngược lại nhưng bên trong điều đầu tiên. Hãy vẽ một hình chữ nhật với một lỗ ở giữa bằng cách sử dụng dòng. 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(); fill();

Bạn có thể làm điều này với bất kỳ hình dạng Hãy thử một vòng cung. theo một hướng khác theo hướng ngược lại, sử dụng bán kính nhỏ hơn