Entrar Ainda não tem acesso?
1
resposta

encontrar o erro

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 Thiago Leges Martins da Silva
| 23k xp | 3 posts

A barra aparece preta, não consigo encontrar meu erro.

<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>
1 resposta
por Marcus Cesar Hüsemann Filho
| 165.4k xp | 50 posts

Olá Thiago, tudo bem?

Dentro da função desenhaBarra, atente-se a chamada da função desenhaRetangulo.

Você fez a chamada dessa maneira:

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

Quando o esperado pela função desenhaRetangulo era isso:

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

Observe que mudando essa chamada as cores irão aparecer.

Ainda dentro dessa da chamada da função desenhaRetangulo existe um problema que faz com que os gráficos não sejam exibidos corretamente. Eu faria a chamada dessa maneira para corrigi-lo:

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

Sua função desenhaBarra completa:

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

Abraços, Marcus.