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

[Proyecto] Paint, me tarde durisimo pero si salio

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

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

    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 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);

    pincel.fillStyle="gray"
    pincel.fillRect(150, 0, 50, 50);

    pincel.strokeStyle="black"
    pincel.strokeRect(150,0,50,50)

    pincel.font="10px Georgia";
    pincel.fillStyle="black";
    pincel.fillText("Borrador", 155, 28); 

    var puedoDibujar = false;

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

            if(x<210 && y<60){
            }

            else {
            pantalla.onmousedown = habilitarDibujar;
            pincel.fillStyle = color;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();
            }

        }

    }

    function habilitarDibujar() {
        puedoDibujar = true;
    }

    function deshabilitarDibujar() {
        puedoDibujar = false;
    }

    function escogerColor(evento1){

        if(puedoDibujar==false){
        var a = evento1.pageX - pantalla.offsetLeft;
        var b = evento1.pageY - pantalla.offsetTop;

             if(a>0 && a<50 && b>0 && b<50){
             color = "red"
            }

            if(a>50 && a<100 && b>0 && b<50){
            color = "green"
            }

            if(a>100 && a<150 && b>0 && b<50){
            color = "blue"
            }

            if(a>150 && a<200 && b>0 && b<50)
           color="gray"
        }
        return color;
    }

    pantalla.onmouseup = deshabilitarDibujar;
    pantalla.onmousemove = dibujarCirculo;
    pantalla.onmousedown = habilitarDibujar;
    pantalla.onclick=escogerColor;



</script>
1 respuesta

Hola Oswaldo, ¡espero que estés bien!

Gracias por tu aporte, esperamos que disfrutes mucho del contenido del curso y que esto te ayude a llegar lejos.

Mucho éxito en todo lo que te propongas y si tienes alguna duda aquí estaremos para apoyarte. ¡Un saludo!

Anexo: el foro se centra en las dudas de contenido y actividad, ¡pero apreciamos sus resultados! Te sugiero que compartas tus resultados en tu grupo en lo servidor del Discord.

¡Vamos juntos!

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