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

Compartiendo código del ejercicio 06 Cambiando de color

Para este ejercicio yo utilicé la condición switch para manejar el rol de colores de la propiedad pincel.fillStyle

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

<script>

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

    pantalla.onclick = dibujarCirculo;

    function alterarColor() {
        switch (vcolor) {
          case 0:
            alert("Ahora dibujo círculos color rojo");
            vcolor=1;
            break;
          case 1:
            alert("Ahora dibujo círculos color amarillo");
            vcolor=2;
            break;
          case 2:
            alert("Ahora dibujo círculos color azul");
            vcolor=0;
            break;
        }   

        return false;
    }

    pantalla.oncontextmenu = alterarColor;

</script>  
1 respuesta

¡Hola Alumno! ¡Deseo que estés bien!

Felicitaciones por tu aprendizaje, continúa con ese empeño. Para agilizar el tiempo de respuesta en caso de dudas relacionadas con los cursos, estamos priorizando el foro para postear dudas.

En caso que desees compartir tus ejercicios o actividades dispusimos en Discord un canal exclusivo para ese fin (#compartatucodigo)

Te dejo éste link que muestra donde puedes compartir tus actividades https://www.youtube.com/watch?v=ZhXdFO6SxQ4

¡Te deseo mucho éxito en tus estudios! y recuerda que aquí estaremos para apoyarte!

¡Vamos juntos!

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