Entrar Ainda não tem acesso?
2
respostas

funçao criar barra

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 Erick Lima Cândido
| 18.5k xp | 6 posts
<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);    
    }

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

    var serie2016 = [65, 20, 13, 2];

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


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

        desenhaRetangulo(50,50,100,150,cores[0]);

    }

    desenhaBarra(50,50,serie2015[0],cores[1],'');

</script>

de principio comecei tentando montar somente um retangulo com funçao para dar continuidade mas ele nao muda de cor, eu nao quero a resposta do exercicio quero entende-lo por parte para assim conseguir soluciona-lo , obrigado.

2 respostas
por Joel Spinelli
| 620.9k xp | 630 posts
Desenvolvedor Node e Front End

Oi Erick, qual a sua dúvida quando ao código? Talvez se ficou alguma dúvida quando ao que o código faz o ideal é fazer assistir a aula novamente, pois acredito que a explicacao do instrutor no vídeo vai ser melhor que qualquer uma escrita aqui.

Agora sobre o problema que está acontecendo é um bugzinho bem chato de achar principalmente se você está iniciando... talvez para achar ele você tenha que colocar um debugger no código e ir nas ferramentas do desenvolvedor para localizar esse pequeno erro.

Se você permitir eu ou outra pessoa pode explicar o que está acontecendo de errado no código de forma detalhada (o máximo possível), mas dica a seu critério

por Daniel Omnion
| 1014.4k xp | 1150 posts

O problema está no final do seu código

function desenhaBarra(x,y,serie,cores,texto){
        console.log(cores);
        desenhaRetangulo(50,50,100,150,cores[0]);
    }
    desenhaBarra(50,50,serie2015[0],cores[1],'');

Quando você executa a função "desenhaBarra", você passa como parâmetro a cor. A cor enviada é a segunda posição do array cores, a cor "green".

Dentro de "desenhaBarra", você executa a função "desenhaRetangulo". O problema está na hora de passar a cor para a função do retângulo.

Quando você usa o "cores[0]", ele está considerando o parâmetro "cores" da função "desenhaBarra", ele está pegando a primeira posição desta string, no caso o retorno é "g". Ele não está considerando o array "cores" que fica fora da função.

A forma de resolver é fazer um pequeno ajuste na função.

 function desenhaBarra(x,y,serie,cores,texto){
        desenhaRetangulo(50,50,100,150,cores);
  }