Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
2
respuestas

[Proyecto] Proyecto Final (Diseñando con el mouse) //Codigo propio//

Hola, buen dia

Anexo codigo del proyecto final (DIseñando con el mouse), intente realizar un codigo por mi cuenta tomando ciertas funciones que ya sean explicado en los modulos anteriores, si tienen alguna sugerencia es bienvenida,

Saludos

2 respuestas
solución!

¡Hola, Ulises! Deseo que estés bien.

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

¿Ya intentó compartir tu código utilizando la herramienta de insertar un bloque de código (</>)? Si tienes duda de cómo hacerlo, tenemos un video que te puede ayudar.

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.

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
<canvas width="600" height="400"> </canvas>

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


    pincel.fillStyle = "grey";
    pincel.fillRect(0,0,600,400); 

    function dibujarCuadrado(x,y,color){
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");
        pincel.fillStyle = color;
        pincel.fillRect(x,y,50,50); 
        pincel.strokeStyle = "black";
        pincel.strokeRect(x,y,50,50); 

    }

    dibujarCuadrado(0,0,"red");
    dibujarCuadrado(50,0,"green");
    dibujarCuadrado(100,0,"blue");

    var colorActual = "grey"

    function activar(){
        presionado =true
    }


     function desactivar(){
        presionado = false
     }

        function capturarMovimientoDelMouse(evento){

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

    }

   function SeleccionarColor(evento){

        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        console.log(evento)
        if (x>=0 && x<=49 && y>=0 && y<=50){
           colorActual= "red"
           }
            if (x>=50 && x<=99 && y>=0 && y<=50){
               colorActual = "green"
               }
               if (x>=100 && x<=150 && y>=0 && y<=50){
                  colorActual = "blue"
                  }
    }



     pantalla.onclick= SeleccionarColor;
     pantalla.onmousedown = activar;
     pantalla.onmouseup = desactivar;
     pantalla.onmousemove = capturarMovimientoDelMouse;



</script>