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

Lógica de Programación Parte 3

Esta ves no logre el texto :( Si alguien me ilumina, le agradecería :)

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

<script>

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

    var serie2009 = [6, 47, 41, 3, 3];
    var serie2019 = [81, 9, 3, 3, 4];
    var colores = ["blue","green","yellow", "red","gray"];

    function dibujarRectangulo(x, y, base, altura, color) {

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

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

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

        pincel.fillStyle = colores;
        pincel.fillRect(x, y, 100, serie);
        pincel.strokeStyle="black";
        pincel.strokeRect(x, y, 100, serie);

    }

    //Aquí viene el texto faltante
    dibujarRectangulo(0, 0, 600, 400, "lightblue");
    escribirTexto(55, 55, "2009");

    // Barras
    var masVisible = 20;
    /* masVisible = 20; es para hacer que las barras sean mas
    *  visibles para el usuario, para poner por Default descamentar
    *  la siguiente sinea*/
    //masVisible = 0;

    var nivel = 100;

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

        dibujarBarra(100, nivel, serie2009[i]+masVisible, colores[i], "2009");

        nivel = 100;

        for (var x = 0; x < i+1; x++) {
            nivel += serie2009[x]+masVisible;
        } 

    }

    nivel = 100;
    for (var i = 0; i < 5; i++) {

        dibujarBarra(400, nivel, serie2019[i]+masVisible, colores[i], "2009");

        nivel = 100;

        for (var x = 0; x < i+1; x++) {
            nivel += serie2019[x]+masVisible;
        } 

    }


</script>
1 respuesta

hola, lo ideal es que la funcion escribirtexto este dentro de la funcion dibujarbarra, asi como tambien el for, que usando uno es mas que suficiente. Fijate en la solucion que da el profe.

Igual de todas formas te dejo una posible solucion a tu codigo, da lo que queres, no se si seria lo correcto. Antes de recorrer cada arreglo llamas a la funcion escribirtexto.

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

<script>

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

    var serie2009 = [6, 47, 41, 3, 3];
    var serie2019 = [81, 9, 3, 3, 4];
    var colores = ["blue", "green", "yellow", "red", "gray"];

    function dibujarRectangulo(x, y, base, altura, color) {

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

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

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

        pincel.fillStyle = colores;
        pincel.fillRect(x, y, 100, serie);
        pincel.strokeStyle = "black";
        pincel.strokeRect(x, y, 100, serie);

    }

    //Aquí viene el texto faltante
    dibujarRectangulo(0, 0, 600, 400, "lightblue");
    escribirTexto(55, 55, "2009");

    // Barras
    var masVisible = 20;
    /* masVisible = 20; es para hacer que las barras sean mas
    *  visibles para el usuario, para poner por Default descamentar
    *  la siguiente sinea*/
    //masVisible = 0;

    var nivel = 100;

    escribirTexto("2009", 120, 80);

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

        dibujarBarra(100, nivel, serie2009[i] + masVisible, colores[i]);

        nivel = 100;

        for (var x = 0; x < i + 1; x++) {
            nivel += serie2009[x] + masVisible;
        }

    }

    nivel = 100;

    escribirTexto("2019", 420, 80);

    for (var i = 0; i < 5; i++) {

        dibujarBarra(400, nivel, serie2019[i] + masVisible, colores[i]);

        nivel = 100;

        for (var x = 0; x < i + 1; x++) {
            nivel += serie2019[x] + masVisible;
        }

    }


</script>