Solucionado (ver solución)
Solucionado
(ver solución)
1
respuesta

Cambiar color de círclo con click derecho

Hola a todos. Esta es mi propuesta para cambiar de color al círculo dibujado en pantalla. Solamente modifiqué la función de alterar el color para volver al color inicial al haber llegado al elemento (color) final del array. Y dice una, y dice dos, y dice tres...

<canvas width="600" height="400"> </canvas>

<script>

    var screen = document.querySelector("canvas");
    var brush = screen.getContext("2d");    
    brush.fillStyle = "grey";
    brush.fillRect(0,0,600,400); 
    var colors = ["blue", "red", "green"];
    var actualIndexColor = 0; // comienza con blue

    function drawCircle(evento){
        var x = evento.pageX - screen.offsetLeft;
        var y = evento.pageY - screen.offsetTop;    

        brush.fillStyle = colors[actualIndexColor];
        brush.beginPath();
        brush.arc(x,y,10,0,2*3.14);
        brush.fill();
        console.log(x + "," + y);        
    }

    screen.onclick = drawCircle;

    function alterColor() {
       actualIndexColor++;

       if(actualIndexColor > colors.length){
        actualIndexColor = 0;
       }

       return false; //menú contextual padrón de `canvas` no sea exhibido
    }

    screen.oncontextmenu = alterColor;

</script> 

Un saludo y hasta pronto :)

1 respuesta
solución!

Hola Miguel, espero que estés bien! Gracias por compartir tu código con nosotros. Si tiene alguna pregunta sobre el contenido del curso, estamos aquí para ayudarlo. ¡Sigue practicando! ¡Vamos juntos! :)

Si este post te ayudó, por favor, marca como solucionado ✓.