desafio retangulos

Olá, Jorge!

Essas variáveis estão sendo declaradas fora da função desenhaBarra sim, porém elas estão passadas como argumento pra ela como nesse exemplo aqui:

  var serie2015 = [50, 25, 20, 5];
  var serie2016 = [65, 20, 13, 2];

  var cores = ['blue', 'green', 'yellow', 'red'];

  desenhaBarra(50, 50, serie2015, cores, '2015');

Sim, você pode passar qualquer tipo como argumento de uma função, inclusive arrays.

somaAltura recebe a soma da alturas, usamos ela porque precisamos saber onde termina o nosso retângulo anterior, em outras palavras estamos sabendo a altura dele pra desenhar outro retângulo embaixo dele, esse valor é o eixo y. Essa variável também poderia chamar proximoPontoOndeORetanguloSeraDesenhado somado com mais 50 que é o valor inicial de y.

serie[i] e cores[i] São um array com as alturas e cores das barras (retângulos), O tamanho que ele terá mesmo, é como se fosse o height do HTML. Toda vez que o loop roda ele acessa a serie na posicao i, isso vai ser até serie.length que retorna 4, então ele vai rodar 4 vezes.

var altura = serie[0];

// Depois i já é igual a 1 e vai até 3, porque é até que i seja menor que 4
var altura = serie[1];

Espero que eu tenha te ajudado a entender melhor.

o que eu entendi até o momento foi isso mas tenho algumas dúvidas , vou tentar resumi-las a estrutura minima para fazer um array seria um sistema de repetição com for para criar um contador que irá acessar as variaveis de dentro do array ?

se eu colocar serie.length vale para qualquer array de forma generica sem ter que especificar como por exemplo segredos.length?

eu deveria ser capaz de criar isto com os dados me informados anteriormente ou entende-los de forma geral ?

leve em conta que este foi o primeiro curso de programação que fiz

abaixo estão minhas anotações caso precise de mais detalhes

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

<script>


function desenhaRetangulo(x, y, largura, altura, cor) {

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
    pincel.fillStyle = cor;
    pincel.fillRect(x, y, largura, altura);
    pincel.strokeStyle = "black";
    pincel.strokeRect(x, y, largura, altura);
}

function desenhaTexto(x, y, texto); {

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

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

function desenhaBarra(x, y , serie, cores, texto){

      desenhaTexto(x, y - 10, texto);
      var somaAltura = 50;
      for ( var i = 1; i < serie.length; i++)
      var altura = serie[1]

                     50 /50    /  0 /  largura = invariavel / serie2015 
      desenhaRetangulo(x, y + somaAltura , 50, altura, cores[i])

      somaAltura = somaAltura + altura // na primeira vez do loop ira para 50

}   

  var cores = ['blue','green','yellow', 'red'];
  var serie2015 = [50,25,20,5]; // altura que receberá = serie[i]   i = contador  para acessar os fatores do array serie = altura ?
  var serie2016 = [65,20,13,2]; // altura que receberá = serie[i]   i = contador  para acessar os fatores do array serie = altura ?

desenhaBarra(50, 50, serie2015, cores, '2015');
desenhaBarra(150, 50, serie2016, cores, '2016');
</script>

loop 1 somaaltura = 0 altura = 50 == 50 loop 2 somaaltura = 50 altura = 25 == 75 loop 3 somaltura 75 altura = 20 == 95 loop 4 somaaltura 95 altura = 5 == 100 no caso confere porque se referia à porcentagem

o soma altura muda o ponto inicial onde sera desenhado ou começado a ser traçado o novo retangulo, nesse desenhaBarra

mas tirando desse contexto de somaaltura poederiamos classificar ou coloca-lo de que forma ?

function desenhaBarra(x, y , serie, cores, texto){

desenhaTexto (x, y - 10, texto); var somaAltura = 0; for ( var i = 1; i < serie.length; i++) var altura = serie[1]

essa serie[1] ela vai ser declarada quando eu colocar la embaixo pra escrever na funçao , vou colocar serie2015 então serie = serie2015 mesmo que nao fosse serie2015 e fosse coxionha2015 eu ainda poderia utilizar serie[i] ja que esse "i" não passa de um contador para acessar os fatores desse array , na realidade de todos arrays , talvez seja um ponto necessario para mexer com arrays e esteja presente em todos os tipos de códigos ?

eu deveria ser capaz de criar este tipo de código ou deveria apenas enteder? este exercicio foi criado para realmente fazer , e julgou que eu seria capaz de realizar um codigo desses ? ou apenas em entede-lo mesmo que de forma não tao aprofundada ?