Eu não entendi a resolução do instrutor! | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Até esta parte,eu entendi:

<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);    
    }



</script>

Mas a partir daqui eu não entendi nada do que ele fez e faltou algum video explicando como fazer isto aqui:

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

desenhaTexto(x, y - 10, texto);

var somaAltura = 0;
for (var i = 0; i < serie.length; i++) {
    var altura = serie[i];
    desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);
    somaAltura = somaAltura + altura;
}
}

alguém pode me explicar o que ele fez?

Caro Caique e Lucas, boa noite.

Para entender vamos completar o código com as definições de variáveis e a chamada da função desenhaBarra como segue:

var serie2015 = [50, 25, 20, 5]; var serie2016 = [65, 20, 13, 2]; var cores = ['blue', 'green', 'yellow', 'red'];

    desenhaBarra(50, 50, serie2015, cores, '2015');
    desenhaBarra(150, 50, serie2016, cores, '2016');

A chamada da função desenhaBarra atribui x =50 e y =50 para a serie2015 e o texto 2015.

A chamada da função desenhaBarra novamente atribui x =150 e y =50 para a serie2016 e o texto 2016.

Por que isso? Para iniciar o desenho de cada barra, uma ao lado da outra, começando de cima para baixo, a 2015 na posição x=50 e a 2016 mais à direita na posição x = 150. Por isso que o y = 50 não muda pois ambas começam de cima para baixo a partir da mesma posição .

Logo de início o desenhaTexto posiciona os textos 2015 e 2016 sendo que para que o texto não seja escrito na mesma linha do início do retângulo ( y = 50) temos o atributo y - 10 para que o texto fique afastado um pouco para cima. Faça um teste e deixe só y (tire o - 10) e veja o que acontece.

Posicionado o texto que classifica cada barra (2015 e 2016) devemos começar a desenhar os retângulos que terão as alturas dadas pelas series.

Para isso precisamos começar com o somaAltura = 0 e percorrer cada uma das posições das series (2015, 2016 e cores)

O recurso para lermos cada uma das posições do array é o "for" com "i" incremental começando com i = 0 (1a posição do array) até a última "serie.length".

Assim a var altura pega na 1a passada 50 da serie2015, 65 da serie2016 e "blue" da serie cores. Joga esses valores no desenhaRetangulo.

O desenhaRetangula vai desenhar o primeiro retângulo que será "blue" para 2015 e 2016 a partir das coordenadas x e y inicias (as duas primeiras linhas que escrevi aqui) só que para o y somando com o somaAltura.

Vamos fazer a 1a passada.

Para 2015. Ele começa a desenhar o 1o retângulo azul a partir de x=50 e y = 50 (na 1a passada o somaAltura =0), com largura 50 que é igual para todos e altura igual à primeira posição do array serie2015, no caso 50.

Para 2016. Ele começa a desenhar o 1o retângulo azul a partir de x=150 e y = 50 (na 1a passada o somaAltura =0), com largura 50 que é igual para todos e altura igual à primeira posição do array serie2016, no caso 65.

Depois dessa passada o somaAltura que era 0 (zero) vai ser adicionado da altura do primeiro retângulo azul (50 e 65 respectivamente). Para que isso? Para que na segunda passada, que vai desenhar o 2o retângulo, verde, ele se posicionar bem abaixo do retângulo azul anterior. O somaAltura para cada passo soma a altura do retângulo anterior, ou seja, varia o y de cima para baixo.

Espero ter ajudado.

Mergulhe em programação