Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Me ajudem a entender esse código, por favor

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Extraindo funções e atividade Gráfico de barras

por Marcus Vinicius de Oliveira Arruda
| 28.9k xp | 26 posts

Esse é o código do professor

<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 = 0;
        for (var i = 0; i < serie.length; i++) {
            var altura = serie[i];
            desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);
            somaAltura = somaAltura + altura;
        }
    }

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

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

</script>

Eu não consegui compreender o que essa função está fazendo

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

Porque temos a var somaAltura ?

        var somaAltura = 0;

E depois ela é chamada para somar a y

 desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);

Infelizmente não consegui entender esse loop ainda, alguém pode me salvar Valeu

4 respostas
por Michael Granados
| 13.9k xp | 6 posts

Olhando o gráfico gerado, é colocado um retangulo abaixo do outro.

Veja em https://jsbin.com/hexiwapora/edit?html,output

Então, ele percorre a serie, por exemplo:

var serie2015 = [50, 25, 20, 5];

E casa com o array de cores em:

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

Criando primeiro uma caixa azul e colocando, logo abaixo a caixa verde e assim por diante.

Então, o quadro azul deve começar na altura 0 e ter 50 de altura, já o quadro verde deve começar em 50 e ter 25, já o quadro amarelo deve começar em 75 (50+25) e ter 20 de altura... e assim por diante.

Por isso ele faz esta adição em (note o y+somaAltura):

desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);

E, depois, guarda para o próximo retângulo:

somaAltura = somaAltura + altura;

Espero ter ajudado a clarear as ideias. Qualquer coisa, manda sua dúvida :-D

por Marcus Vinicius de Oliveira Arruda
| 28.9k xp | 26 posts

Boa noite, Michael. Tudo bem cara?

Cara vê se entendi kk Eu entendi assim...

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;
        }
    }
     var cores = ['blue','green','yellow', 'red'];
        var serie2015 = [50,25,20,5];

Nessa parte 

    var somaAltura = 0;
    desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);
        somaAltura = somaAltura + altura;

É como se var cores fosse x e var series2015 fosse y Tipo, desenhaRetangulo("blue", 50 + 0, 50, 50, "blue"); somaAltura = 0 + 50 = 50;

Ai fica

    var somaAltura = 50;
    desenhaRetangulo("green", 25+ 50, 50, 50, "green");
        somaAltura = 50+ 25; = 75;

e assim vai 

    var somaAltura = 75;
    desenhaRetangulo("yellow", 20 + 75, 50, 75, "green");
        somaAltura = 20 + 75; = 95;

E termina 

    var somaAltura = 95;
    desenhaRetangulo("red", 5+ 95, 50, 95, "red");
        somaAltura = 5 + 95; = 100;

E ai o retângulo partiu de 0 até 50 O segundo de 50 até 75 O terceiro de 75 até 95 O último de 95 até 100

é isso ou to errado ? kkkk

Muito obrigado pela atenção e tempo em ler e tirar minhas dúvidas!

Que Deus abençoe sua vida! Abs.

solução!
por Michael Granados
| 13.9k xp | 6 posts

Perfeito! Só acho que ficou meio perdido o x, que é passado ao chamar a função... bem aqui:

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

Mapeando os valores... (o código abaixo não vai funcionar, é meramente explicativo):

desenhaBarra(x = 50, y = 50, series = [50, 25, 20, 5], cores = ['blue','green','yellow', 'red'],  texto = '2015');

Veja, o y começa por 50 para dar uma "respirada"/margem no layout. E a altura é a iteração sobre a série...

Veja...

// desenhaRetangulo(x, (base + y), largura, altura, cor)
desenhaRetangulo( 50 ,  (50  +  0) , 50,  50 ,  "blue" );
desenhaRetangulo( 50 ,  (50  +  50) , 50,  25 ,  "green" );
desenhaRetangulo( 50 ,  (50  +  75) , 50,  20 ,  "yellow" );
desenhaRetangulo( 50 ,  (50  +  95) , 50,  5 ,  "red" );

Mas o raciocínio que você teve está correto. Keep studing!

por Marcus Vinicius de Oliveira Arruda
| 28.9k xp | 26 posts

Caraca, Michael

Que explicação maravilhosa cara, entendi a questão do x kkkk gostei muito da atenção e ajuda que me proporcionou, agradeço muito pela ajuda.

Que Deus abençoe sua vida, fique com Deus! Abs.

Até as próximas dúvidas e soluções rsrs

Obrigado!