Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Cambiar colores

Hola! Les comparto mi código en el que usé nuevos colores y mas cantidad.

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

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");    
    pincel.fillStyle = "gray";
    pincel.fillRect(0,0,600,400); 
    var colores = ["purple", "pink", "lightblue", "lightyellow", "lightgreen"];
    var indicecolorActual = 0; //empieza en el violeta

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

        pincel.beginPath();
        pincel.fillStyle = colores[indicecolorActual];
        pincel.arc(x,y,10,0,2*3.14); //circulito
        pincel.fill();
        console.log(x + ", " + y);
    }

    pantalla.onclick = dibCirculo;

    function cambiarColor() {
        indicecolorActual++;
        if(indicecolorActual >= colores.length) {
            indicecolorActual = 0; //para reinicar el array
        }
        return false;
    }

    pantalla.oncontextmenu = cambiarColor;

</script>
1 respuesta

Hola Florencia, 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 ✓.