Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

06 Cambiando de color

Buenas tardes. Comparto mi código

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

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d"); 
    var color = ["blue","red","green"];
    var posicion = 0; 
    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.fillStyle = color[posicion];
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.14);
        pincel.fill();
        console.log(x + "," + y);      
    }

    function alterarColor() 
    {
        posicion++;
        if (posicion > 2 )
        {
            posicion = 0;
        }
        return false;
    }

    pantalla.onclick = dibujarCirculo;

    pantalla.oncontextmenu = alterarColor;

</script> 

Saludos.

2 respuestas

Hola José, espero que esté bien.

Gracias por compartir tu código con nosotros.

Si tienes alguna pregunta sobre el contenido de los cursos, estaremos aquí para ayudarte.

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

José gracias por compartir tu código! Simple, super compresible y me sirvió muchísimo!