Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
3
respuestas

dudas ejercicio grafica de barras

Buenas noches.

Solicito ayuda por favor, ya que tengo varias dudas:

1) No entiendo la parte i++ del for, por qué en la clase "Las iteraciones son fantásticas" (minuto 2:50), el contador era x = x +50; según lo que entendí el ++ aumenta una unidad, sé que son diferentes ejercicios pero no entiendo en este caso, qué es lo que aumenta este ++, ? 2) En el for, qué representa el número 50?, si es la base, por qué no se le llama base igual que a altura? 3) Por qué la variable sumaAltura es igual a 0?

<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) {

        escribirTexto(x, y - 10, texto);

        var sumaAltura = 0;
        for (var i = 0; i < serie.length; i++) {
            var altura = serie[i];
            dibujarRectangulo(x, y + sumaAltura, 50, altura, colores[i]);
            sumaAltura = sumaAltura + altura;
        }
    }

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

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

</script>

Agradezco su ayuda.

3 respuestas

hola, tambien soy nueva en este aprendizaje pero puedo entender tu pregunta en cuanto al for de la clase "las iteraciones son fantasticas" vs el for de este ejercicio de las barras:

en el de las iteraciones son fantasticas, se trataba de dibujar unos cuadrados de 50 pix en todo el ancho o width de nuestro canvas, teniendo en cuenta que el width era de 600, lo cual nuestro ciclo era creado para dibujar 12 cuadrados (600/50)... entonces el punto inicial en el eje x= 0 . y nuestro ciclo iva ir iterando de 50 px en 50x hasta que llegara a su fin x= x +50. si en ese ejercicio hubieran puesto x++ simplmente no daba el resultado porque el ++ es como decir +1 y el ejercicio de los cuadrados necesitabamos que fuera aumentando de 50 px en 50 px

++ es igual a decir +1, si queremos decir mas 2, o mas 3 o cualquier otro numero no funcionaria digitar varias veces el +, en ese caso si se escribiria el numero que deseariamos.

el el otro ejercicio de las barras la variable suma alturas hace referencia a una variable que se ha creado para que poco a poco vaya sumando las alturas de los rectangulos, entonces var suma alturas = 0 y luego le decimos que sumamos la var alturas, para que nos vaya haciendo esa suma

que pena lo poquito que puedo aportar, pero asi lo entendi,

saludos

Compañero lo primero es entender como esta estructurado el ciclo FOR:

  1. FOR(i = 0; i < serie.length; i++):

  2. La primera parte i = 0 es el inicio del recorrido (como se esta recorriendo un arreglo [Array], este inicia en 0 para arrancar desde el primer elemento y de acuerdo a eso se establece ese valor "esto puede varias según el ejercicio").

  3. La segunda i < serie.length es la condición de finalización (limite) en la cual la variable de inicio i** debe de ser menor al tamaño del arreglo **serie.

  4. La tercera es el incrementador o valor de incremento (puede incrementar de uno en uno "++" o asignandole el valor deseado i + "n"). Si se cumplen los pasos anteriores se ejecutaran las sentencias dentro del FOR {}

  5. variable sumaAltura se usa como un acumulador ("Suma continúa") para ubicar los cuadros en su posición asi como lo muestra el ejemplo del desafío.

Muchas gracias compañeros ayudarme con mis dudas