rectangulo - Dibujar diferentes formas de colores en una ruta(HTML5 Canvas/Javascript)

dibujar un triangulo en javascript

Question

Estoy tratando de dibujar arcos de múltiples círculos llenos de diferentes colores.

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

Esto produce ambos arcos rellenos de rojo, y puedo decir que hay un contorno negro alrededor del más pequeño.

¿Alguien puede arrojar algo de luz sobre cómo puedo lograr esto? ¿Qué estoy haciendo mal?

Answer 1

Cierra el camino y luego vuelve a abrirlo.

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

jsFiddle .

... entre el código de dibujo de arco.

Answer 2

Un camino comienza con beginPath y termina con endPath. Cada cosa en el medio es el mismo camino. Incluso puedes trazar caminos con agujeros usando reglas de aleteo. Dibuja algo en una dirección y otra cosa en la dirección opuesta pero dentro de la primera cosa. Dibujemos un rectángulo con un agujero en el medio usando líneas. 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 ();

Podrías hacer esto con cualquier forma. Pruebe un arco en una dirección y luego en otra en la dirección opuesta usando un radio más pequeño