dibujarBarra | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

2
respuestas

por Álvaro Peña Burgos

| 35.1k xp | 55 posts

![]( Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad )

<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);    
    }

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



    function dibujarBarra(x, y, serie, colore, texto) {

        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");
        var coordenada = y;

        for (var i = 0; i < serie.length; i++) {

        dibujarRectangulo(x, coordenada, 50, serie[i], colore[i]);
        coordenada = coordenada + serie[i];
        document.write(colore[i]);

        }

        escribirTexto(x, y-5, texto);

    }

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

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

    var x = 0;
    for(var i = 0; i < serie2009.length; i++){

        escribirTexto(x, 30, navegadores[i]);
        dibujarCuadrado(x,0,colores[i]);
        x = x + 55;

    }


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


</script>

2 respuestas

por Jose Gonzalez

| 2169.9k xp | 6782 posts

Instructor

12/01/2022

Hola Álvaro

Gracias por compartir tu código, está muy bien felicitaciones.

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

por Gustavo Adolfo Lopez

| 169.1k xp | 16 posts

17/01/2022

Hola a todos, la verdad que me costo demasiado hacerlo y tuve que recurrir a la "opinion del instructor", y mirar el codigo, no lo copie igual ya que hice la solucion con un while....pero me costo horrores este ejercicio. Si no me guiaba con las soluciones no lo hubiera hecho, y la verdad es que me molesta, ojala me vaya acostumbrando a hacer codigo.

<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="20px Georgia";
        pincel.fillStyle="black";
        pincel.fillText(texto, x, y);    
    }
    var serie2009 = [6, 47, 41, 3, 3];
    var serie2019 = [81, 9, 3, 3, 4];
    var colores = ["blue","green","yellow", "red","gray"];
    var navegador = ["Chrome ", "Firefox ","Explorer/Edge "," Safari   ","    Otros "]

    function dibujarBarra(x, y, serie, colores, texto) {
        escribirTexto(x,y-6,texto);
        var altura = 0;
        var suma = 0;
           while (altura < serie.length) {
            var sumaAltura = serie[altura];
            dibujarRectangulo(x,y+suma,80,sumaAltura,colores[altura]);
            suma = suma + sumaAltura;
            altura++;
        }
    }
    dibujarRectangulo(0, 0, 600, 400, "lightgrey");
    dibujarBarra(50, 50, serie2009, colores, "2009");
    dibujarBarra(150, 50, serie2019, colores, "2019");
</script>

Saludos para todos!!!!