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

Buenos días

Adjunto la solución al ejercicio de gráfico de barras:

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

<script>

    function dibujarRectangulo(x, y, base, altura, color) {
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

        pincel.fillStyle=color;
        pincel.fillRect(x,y, base, altura);
        pincel.strokeStyle="black";
        pincel.strokeRect(x,y, base, altura);
    }

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

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

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

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

    function dibujarBarra(x, y, serie, colores, texto) {
        for (var i = 0; i < 5; i++) {
            var yBarra = y;
            for (var j = 0; j < i; j++) {
                yBarra += serie[j];
            }
            dibujarRectangulo(x,yBarra,50,serie[i],colores[i]);
        }
    }


    var serie2009 = [6, 47, 41, 3, 3];
    var serie2019 = [81, 9, 3, 3, 4];
    var colores = ["blue","green","yellow", "red","gray"];
    var textos = ["Chrome","Firefox","Internet Explorer/Edge","Safari","Otros"];

    escribirTexto(50,40,"2009");
    escribirTexto(150,40,"2019");

    dibujarBarra(50, 50, serie2009, colores, "2009");
    dibujarBarra(150, 50, serie2019, colores, "2019");

    for (var c = 0; c < textos.length; c++) {
        escribirTextoColor(250,50+c*20,textos[c],colores[c]);    
    }

</script>
1 respuesta

Hola Adrian, espero que estés bien.

Gracias por compartir tu código con nosotros. Estamos muy contentos de ver tu progreso.

Te recomiendo que compartas la solución de tus ejercicios en nuestro servidor de Discord, allí tenemos un canal exclusivo para eso (#compartatucodigo) y el foro solo quedaría para esclarecer cualquier duda que puedas tener sobre el contenido de los cursos.

Recalcamos que estas actividades sirven para priorizar tus conocimientos a partir de la práctica, por lo que no es necesario publicar tus ejercicios y resoluciones aquí en el foro!

Te dejo el enlace de un video sobre el uso del foro aquí