2
respuestas

Ciclo While

Hola, les comparto mi codigo me fue muy dificil hacerlo en cuanto al texto no supe bien porque el 10, alquien que me pueda ayudar???

<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 dibujarBarra(x, y, serie, colores, texto) {

        //Aquí necesitamos escribir el texto y dibujar los rectángulos



        var sumaAltura = 0;
        var barrita= 0;

            while( barrita < serie.length){


                dibujarRectangulo(x,y+sumaAltura,50,serie[barrita],colores[barrita]);

                sumaAltura = sumaAltura + serie[barrita];

            barrita ++;
            }



    }

                    var serie2009 = [6, 47, 41, 3, 3];
                    var serie2019 = [81, 9, 3, 3, 4];

                    var colores = ["blue","green","yellow", "red","gray"]; 

       //para dibujar la barra sera esta funcion que secreo anteriormente

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


    //Aquí viene el texto faltante



</script>
2 respuestas

Buenos días Ana, a que te réferis cuando decís que no sabes por que el 10?

Saludos

 function dibujarBarra(x, y, serie, colores, texto) {
                // Es para mandar a llamar la funcion de escribir texto, esto es lo que le agregue para que apareciera el 2009 y 2019
                escribirTexto(x, y - 10, texto);
            //Aquí necesitamos escribir el texto y dibujar los rectángulos
            var sumaAltura = 0;
            var barrita= 0;

                while( barrita < serie.length){
            dibujarRectangulo(x,y+sumaAltura,50,serie[barrita],colores[barrita]);

            sumaAltura = sumaAltura + serie[barrita];
                   barrita ++;
                }
        }

En tu funcion dibujarBarra manda a llamar a la funcion escribirTexto, para que aparezca el año de las barritas, por que no aparecen los años arriba de tu barrita, ya agregando la funcion de escribirTexto aparecen.

Metenia algo enredado hacerlo con la funcion while y vi tu codigo y me quedo mas claro, gracias amiga.