Рисование различных цветных фигур в пути (HTML5 Canvas/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

Может ли кто-нибудь пролить свет на то, как я могу это сделать? что я делаю неправильно?

Ответы

Ответ 1

Закройте путь, а затем снова откройте его.

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

jsFiddle.

... между кодом рисования дуги.

Circles

Ответ 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();   заполнения();

Вы можете сделать это с любой формой. Попробуйте дугу в одном направлении, затем другую в противоположном направлении, используя меньший радиус