Entrar ¿Aún no tienes acceso?
Solucionado (ver solución)
Solucionado
(ver solución)
2
respuestas

Mi version basica y la mejorada

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Nuestro primer juego y actividad Diseñando con el mouse

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

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

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