Mi version basica y la mejorada | Lógica de programación: Practicando con juegos y animaciones

Solucionado (ver solución)

Solucionado
(ver solución)

2
respuestas

por Javier Alejandro Vieira Nobre

| 103.8k xp | 6 posts

Ayudante de cátedra

Hola, dejo por aca la solucion a lo que se pide, es algo distinta a lo que ponen como una de las posibles formas de hacerlo, asi que me parecio util. Solucion:


<body style="background-color:black;">
<font color="white">

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

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

    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 650, 400);
    pincel.fillStyle = 'red'; 
    pincel.fillRect(0, 0, 50, 50);
      pincel.fillStyle = 'green';
    pincel.fillRect(50, 0, 50, 50);
    pincel.fillStyle = 'blue';
    pincel.fillRect(100, 0, 50, 50);

    var color=["red","green","blue"]

    var puedoDibujar = false;



    function elegirColor(evento) {
         var x = evento.pageX - pantalla.offsetLeft;
         var y = evento.pageY - pantalla.offsetTop;
            elegirColor=color[2]
         if((x>=0 && x<50)&&(y<50)){
            elegirColor=color[0];
        }
         if((x>=50 && x<100)&&(y<50)){
            elegirColor=color[1];
        }

        if((x>=100 && x<150)&&(y<50)){
            elegirColor=color[2];
        }

         }    



    function dibujarCirculo(evento) {

        if(puedoDibujar) {

            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            if ((x>=0 && x<=150)&&
                (y>=0 && y<=50)){
            };
            if ((x>150)&& (y>0 && y<50)
                ) { 
                pincel.fillStyle = elegirColor;
                pincel.beginPath();
                pincel.arc(x, y, 5, 0, 2 * 3.14);
                pincel.fill();
             }
             if ((x>=0)&& (y>50)
                ) { 
                pincel.fillStyle = elegirColor;
                pincel.beginPath();
                pincel.arc(x, y, 5, 0, 2 * 3.14);
                pincel.fill();
             }
        }

    }

    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }
    pantalla.onclick = elegirColor;
    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;




</script>

</font>
</body>

2 respuestas

por Javier Alejandro Vieira Nobre

| 103.8k xp | 6 posts

Ayudante de cátedra

10/01/2022

Y luego dejo una version mejorada, con una barra para el nombre del programa, descripcion de los colores y un boton para borrar, para no tener que actualizar cuando se quiere volver a dibujar!

<body style="background-color:black;">
<font color="white">

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

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

    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 50, 600, 450);

    pincel.fillStyle = 'lightgrey';
    pincel.fillRect(0, 0, 600, 50);


    pincel.strokeStyle = "black";

    var color=["red","green","blue", "black"]

    var puedoDibujar = false;



    function escribirTexto(x , y, texto) {
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

        pincel.font="15px Georgia";
        pincel.fillStyle="white";
        pincel.fillText(texto, x, y);   
    }

    function crearBoton (x,color,texto){
        pincel.fillStyle = color; 
        pincel.strokeRect(x, 0, 50, 50);
        pincel.fillRect(x, 0, 50, 50);
        escribirTexto(x+5,30, texto)
    }


    function limpiarPantalla(){

        pincel.clearRect(0,50,600,450);
        pincel.fillStyle = 'grey';
        pincel.fillRect(0, 50, 600, 450);
    }

    crearBoton (0,color[0],"Rojo")
    crearBoton (50,color[1],"Verde")
    crearBoton (100,color[2],"Azul")
    pincel.strokeStyle = "white";
    crearBoton (550,color[3],"Borrar")


        pincel.font="20px Georgia";
        pincel.fillStyle="black";
        pincel.fillText("Pintura 2.0",280, 30)


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

         if((x>=0 && x<50)&&(y<50)){
            elegirColor=color[0];
        }
         if((x>=50 && x<100)&&(y<50)){
            elegirColor=color[1];
        }

        if((x>=100 && x<150)&&(y<50)){
            elegirColor=color[2];
        }

        if((x>=550 && x<600)&&(y<50)){
            limpiarPantalla();
           // pincel.fillStyle = 'grey';
           // pincel.fillRect(0, 50, 600, 450);

        }

         }    

    function dibujarCirculo(evento) {

        if(puedoDibujar) {

            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;


             if (y>55){ 
                pincel.fillStyle = elegirColor;
                pincel.beginPath();
                pincel.arc(x, y, 5, 0, 2 * 3.14);
                pincel.fill();
             }
        }

    }

    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }
    pantalla.onclick = elegirColor;
        var  elegirColor=color[2]
    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;




</script>

</font>
</body>

solución!

por Thiago Vazquez Enninger

| 775.1k xp | 1813 posts

Instructor

11/01/2022

Hola Javier, espero que esté bien.

Gracias por compartir tus códigos 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