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

cambiando colores

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

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    pincel.fillStyle = "grey";
    pincel.fillRect(0,0,600,400); 

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


        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.14);
        pincel.fill();
        console.log(x + "," + y);        
    }

    pantalla.onclick = dibujarCirculo;

    function alterarColor(){
        var colores = ["blue", "red", "green"];
        if (color>2) {color=0;}
        console.log (color);
        pincel.fillStyle = colores[color];
        color++;   
        return false;
    }

    var color = 0;
    pantalla.oncontextmenu = alterarColor;

</script> 
1 respuesta

¡Hola Carlos!

En el código que compartiste, se puede ver que al hacer clic en la pantalla se dibuja un círculo en la posición del clic. También se puede ver que al hacer clic con el botón derecho del mouse, el color del círculo cambia entre azul, rojo y verde.

Para cambiar los colores que se muestran en la pantalla, simplemente debes modificar el arreglo de colores en la función alterarColor(). Puedes agregar o quitar colores según tus necesidades. Por ejemplo, si quisieras agregar el color amarillo, podrías modificar la línea de código así: var colores = ["blue", "red", "green", "yellow"];.

Espero que esta información te sea útil. ¡Buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios