Рисование разноцветных фигур в контуре (HTML5 Canvas / Javascript) - PullRequest
Новая
       14

Рисование разноцветных фигур в контуре (HTML5 Canvas / Javascript)

22 голосов
/ 25 августа 2011

Я пытаюсь нарисовать несколько круговых дуг, заполненных разными цветами 

        //-------------- 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

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

Ответы [ 2 ]

36 голосов
/ 25 августа 2011

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

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

jsFiddle .

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

Circles

0 голосов
/ 09 октября 2016

Путь начинается с 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 ();

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

...