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)
1
respuesta

Diseño con el Mickey Mouse

Hola, comunidad. Aquí tiene mi solución, me complique bastante, pero la idea que tenia era, si en el futuro me pedían cambiar el tamaño del cuadradro, es que con solo cambiando el tamaño de dimensionCuadrado se ajuste todo sin tener que modificar mucho el código. Sin embargo, luego ver los demás códigos noté que mi implementación fue más complicada. Les adjunto el código y si alguno desea aportar ideas de mejora, con gusto.

<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 limpiarPantalla(ancho, altura){
        pincel.clearRect(0,0,ancho,altura);
    }

    var colores = ["red","green","blue"];
    var color = 2;

    function crearCuadrado(x,y,ancho,altura,color) {
        pincel.fillStyle=color;
        pincel.fillRect(x,y,ancho,altura);
    }
    dimensionCuadrado = 50;

    function crearRectanguloTriColor() {
       crearCuadrado(0,0,dimensionCuadrado,dimensionCuadrado,"red");
       crearCuadrado(dimensionCuadrado,0,dimensionCuadrado,dimensionCuadrado,"green");
       crearCuadrado(dimensionCuadrado*2,0,dimensionCuadrado,dimensionCuadrado,"blue");
    }

    function actualizarPantalla(){
        limpiarPantalla(dimensionCuadrado*3,dimensionCuadrado);
        crearRectanguloTriColor();
    }

    function encontrarArea(x,y,maxX0,minX0,maxY1,minY1,codColor) {
        if ((x < maxX0) &&
            (x > minX0) &&
            (y < maxY1) &&
            (y > minY1 )){
            console.log(x,y);
            color=codColor
        }   
    }

    setInterval(actualizarPantalla,1);

    var puedoDibujar = false;

    function dibujarCirculo(evento) {
        if(puedoDibujar) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            encontrarArea(x,y,dimensionCuadrado,dimensionCuadrado-dimensionCuadrado,dimensionCuadrado,dimensionCuadrado-dimensionCuadrado,0);
            encontrarArea(x,y,dimensionCuadrado*2,dimensionCuadrado,dimensionCuadrado,dimensionCuadrado-dimensionCuadrado,1);
            encontrarArea(x,y,dimensionCuadrado*3,dimensionCuadrado*2,dimensionCuadrado,dimensionCuadrado-dimensionCuadrado,2); 
            console.log(x,y);
            pincel.fillStyle = colores[color];
            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.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

</script>
1 respuesta
solución!

¡Hola Alumno! ¡Deseo que estés bien!

¡Muchas Felicidades!

¡Gracias por compartir tu código con nosotros! Nos alegra mucho ver tu avance en las prácticas, éstas te darán un mayor fundamento en el aprendizaje. ¡Continua con ese mismo entusiasmo y no te desanimes!

En lo esencial, para agilizar el tiempo de respuesta que damos a ustedes, estamos priorizando el foro para postear las dudas como: errores, bugs y cualquier otro problema referente a los cursos.

En cambio, si deseas compartir tu código, ideas o actividades dispusimos en Discord un canal exclusivo para ese fin (⛓┇comparte-tu-codigo-logica) Allí, tus compañeros de estudios podrán ayudarte compartiendo conocimientos. ¡Esta interacción es muy importante para la participación de los alumnos y puede ayudarte a expandir tu red de contactos!

Te dejo éste link que muestra donde puedes compartir tus actividades

¡Te deseo mucho éxito en tus estudios! y recuerda que aquí estaremos para apoyarte!

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