1
respuesta

Asi realize el ultimo ejercicio

Esto es lo que he logrado hacer en base a lo enseñado en el curso. Muchisimas gracias a todo el equipo que nos está apoyando en nuestro aprendizaje.

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

<script>
    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');

    pincel.fillStyle = '#fce6f3';
    pincel.fillRect(0, 0, 600, 400);


    var puedoDibujar = false;
    var Colores = ["red", "green", "blue"]
    var colorEnUSo = 2;
    var medidaDePincel=5;

    function crearPaleta(){
        pincel.fillStyle =  Colores[0];
        pincel.fillRect(0,0,50,50);

        pincel.fillStyle =  Colores[1];
        pincel.fillRect(50,0,50,50);

        pincel.fillStyle =  Colores[2];
        pincel.fillRect(100,0,50,50);

        pincel.fillStyle = "black"
        pincel.fillRect(150,0,50,50);
        pincel.strokeStyle = "white";
        pincel.strokeText("TAMAÑO",153,20);
        pincel.strokeText("PINCEL",157,35);


    }
    crearPaleta();

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

        if( (x >  0)&&
            (x < 50)&&
            (y >  0)&&
            (y < 50)){ 
            colorEnUSo = 0;        
        } 
        else if((x > 50)&&
                (x < 100)&&
                (y > 0)&&
                (y < 50)){ 
            colorEnUSo = 1;  
        }
        else if ((x > 100)&&
                 (x < 150)&&
                 (y > 0)&&
                 (y < 50)){

            colorEnUSo = 2; 

        }else if ((x > 150)&&
                 (x < 200)&&
                 (y > 0)&&
                 (y < 50)){

            medidaDePincel = medidaDePincel-1;
            if(medidaDePincel<1){
                medidaDePincel = 10;
            }
        }

        return false
    }    

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

        if ((x > 0)&&
            (x<200)&&
            (y < 50)){return false}

            else{

            if(puedoDibujar) {
                pincel.fillStyle = Colores[colorEnUSo];
                pincel.beginPath();
                pincel.arc(x, y, medidaDePincel, 0, 2 * Math.PI);
                pincel.fill();
            }
        }

    }

    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

    pantalla.oncontextmenu = elegirPaleta;



</script>
1 respuesta

¡Hola, Erick! Deseo que esté bien.

Muchas gracias por compartir tu proyecto con nosotros. Estamos muy contentos de poder acompañarte en tu camino de aprendizaje.

En lo esencial, en el foro estamos priorizando las dudas y errores.

Para compartir tus proyectos con nosotros y otros estudiantes, te recomiendo que lo haga en nuetro servidor de Discord. Allí tenemos un canal exclusivo para eso (⛓┇comparte-tu-codigo-logica).

Continúa con tus estudios y hasta la proxima.

¡Vamos juntos!

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