Olá, Guilherme!
Uma coisa que você precisa lembrar da Aula 1 é como funcionam as coordenadas do Canvas. Lembre-se dessa imagem:
Quanto maior o X, mais pra direita. Quanto maior o Y, mais pra baixo.
Se você pegar o Y, por exemplo, e subtrair 10, vai ser um pouquinho pra cima. Se somar 10, vai ser um pouquinho pra baixo.
Com o X é parecido: se subtrair 10, vai ser um pouquinho para esquerda. Se somar 10, vai ser um pouquinho pra direita.
O que queremos fazer é o seguinte:
Teremos:
- um texto: no caso, "2015" ou "2016"
- 4 retângulos: um azul, outro verde, outro amarelo e um vermelho, cada um na mesma posição horizontal mas um pouquinho mais pra baixo na vertical. Ou seja, o x mantém-se parecido mas o Y vai sempre aumentando.
A imagem a seguir ajuda a mostrar esse detalhe:
A largura dos retângulos será sempre 50.
A altura vai variar. De onde ele tira a altura? De um array chamado serie, que terá 4 valores de altura, um pra cada retângulo.
No caso de 2015, o array serie terá: [50,25,20,5].
Ou seja, a posição 0 será 50, a 1 será 25, a 2 será 20 e a 3 será 5.
Vamos focar na chamada da função desenhaBarra() para o ano de 2015:
var cores = ['blue','green','yellow', 'red'];
var serie2015 = [50,25,20,5];
desenhaBarra(50, 50, serie2015, cores, '2015');
Vamos lembrar os parâmetros da função desenhaBarra():
function desenhaBarra(x, y, serie, cores, texto) {
//restante do código...
}
Então, os dois primeiros parâmetros definem o valor de x e de y: ambos 50.
O parâmetro serie terá aquele array: [50,25,20,5]
O parâmetro cores terá o array ['blue','green','yellow', 'red']. A posição 0 é blue (azul), a 1 é green (verde), a 2 é yellow (amarelo) e a 3 é red (vermelho).
O texto é "2015", que será a primeira coisa a ser desenhada:
desenhaTexto(x, y - 10, texto);
Como x e y são 50 e o texto é "2015", o texto
começará a ser desenhado nas posições 50 (horizontal) e 40 (50 - 10, vertical).
Então, é definida a variável somaAltura:
var somaAltura = 0;
É feito um for que vai do início ao fim do array serie:
for (var i = 0; i < serie.length; i++) {
O valor da variável i, do for, vai de 0 até enquanto for menor que o tamanho do array. Então, terá os valores 0, 1, 2 e 3.
O for será chamado então essas 4 vezes.
Da primeira vez
- i é 0
- somaAltura é ainda 0.
Então, é definida a variável altura:
var altura = serie[i];
Como i é 0, será obtida a primeira posição (a posição 0) de serie, que é o valor 50, que é colocado na variável altura.
Então é chamada a função desenhaRetangulo():
desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);
Os parâmetros serão:
- x, que é 50
- y + somaAltura, que é 50 + 0
- 50, que é o valor da largura do retângulo
- alturaque é 50
- cores[i], que é a primeira cor, blue
Então, a somaAltura é incrementada com o valor de altura:
somaAltura = somaAltura + altura;
Portanto, somaAltura passará a ser 0 + 50. Ou seja, passará a ser 50.
Não há mais nada no for.
É feito o i++, que passa a ser 1, e é comparado com serie.length (o tamanho do array). Como 1 ainda é menor que 4, entramos dentro do for, com:
Então, é obtido o valor da variável altura novamente:
var altura = serie[i];
Só que agora ié 1. Por isso, altura será 25, que é a segunda posição (a posição 1) do array serie.
Então, a função desenhaRetangulo() é chamada novamente com os parâmetros:
- x, que continua 50
- y + somaAltura, que é 50 + 50, ou seja, 100 que fica abaixo do outro retângulo
- 50, que é o valor da largura do retângulo
- alturaque é 25, um pouquinho menor que o outro retângulo
- cores[i], que é a segunda cor, green
E por aí vai!
