在路徑中繪制不同顏色的形狀（HTML5 Canvas / Javascript）

Question

我正在嘗試繪制多個填充不同顏色的圓弧

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

這會產生兩個用紅色填充的弧線，我可以看出在較小的弧線周圍有一個微弱的黑色輪廓。

任何人都可以闡明如何實現這一目標嗎？ 我做錯了什么？

Answer 1

關閉路徑，然后重新打開它。

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

jsFiddle 。

......弧形圖代碼之間。

Answer 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（）; fill（）;

你可以用任何形狀做到這一點。 使用較小的半徑在一個方向上嘗試弧形，然后在相反方向上嘗試另一個弧形