Bom dia. Ao chegar nessa parte do curso percebi minhas fraquezas, que seriam uma compreensão mais ampla de algumas funções, o que eu fiz foi escrever varias vezes o código tentando melhorar de forma funcional. A primeira versão ficou imensa e muito analógica, pra altera uma coisa tinha que mexe em tudo o que me fez perceber aonde eu poderia melhora. O mais curto que eu consegui fazer foi chamando duas funções separadas 2015 e 2016 No exemplo do exercício ele usou só uma função pra chamar os dois array.
As cores como eram as mesmas pros dois array eu coloquei sem problema foi bem intuitivo usando cores[i] pra ler tudo do array cores.
eu reparei varias coisas mas não enxerguei com clareza. dentro da função desenhaBarra ele não usou i <serie2015 diretamente, ele usou variáveis " somaAltura ou altura" + [i] pra de alguma forma puxar na hora da chamada da função onde só ali ele vai pescar todo o array 2015 e 2016 la ele chamou desenhaBarra "as cordenas X e Y" e so aqui ele puxa os array de forma independente podendo criar vários além de 2015 e 2016
Essa mágica essa junção aonde o array só e lido na hora de imprimir ou chamar não ficou claro, to quase entendendo, quero entende de cabeça, olhar o exemplo do professor da a resposta mas não responde a duvida de como fazer, o que faz esse array funciona lá
aqui segue o código que eu fiz de cabeça testando função por função.
<canvas width="600" height="400"></canvas>
<script>
function desenhaRetangulo(x,y, altura,largura ,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 imprime2015(x,y,texto){
desenhaTexto(x+10,y-10,texto);
for (var i =0; i <serie2015.length; i++){
desenhaRetangulo(x, y,serie2015[i],60, cores[i])
y = y +serie2015[i];
}
}
function imprime2016(x,y,texto){
desenhaTexto(x+10,y-10,texto);
for (var i =0; i <serie2016.length; i++){
desenhaRetangulo(x, y,serie2016[i],60, cores[i])
y = y +serie2016[i];
}
}
var serie2015 = [50,25,20,5];
var serie2016 = [65,20,13,2];
var cores = ['blue','green','yellow', 'red'];
imprime2015(50,50,"2015")
imprime2016(160,50,"2016")
</script>
