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

Não consegui resolver :(

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 Lucas Alionço Perez
| 57.3k xp | 20 posts

Achei esse exercício beeeem difícil!

Passei dias pensando nele mas me rendo. O código que eu havia tentado escrever "quase" deu certo, mas ele criava um retângulo enorme no final! E não consegui entender o porque!

<meta charset='UTF-8'>
<canvas id='tela' width=600 height=400></canvas>

<script>

var tela = document.getElementById('tela');
var pincel = tela.getContext('2d');


function desenhaRetangulo(x,y,largura,altura,cor) {
    pincel.fillStyle = cor;
    pincel.fillRect(x,y,largura,altura);

    pincel.strokeStyle = 'black';
    pincel.strokeRect(x,y,largura,altura);
}

function desenhaTexto(frase,x,y) {
    pincel.font='15px Georgia';
    pincel.fillStyle='black';
    pincel.fillText(frase,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,frase) {
    for(var i = 0; i <= serie.length; i++) {
        desenhaRetangulo(x,y,x,y,cores[i])
        y = y + serie[i];

    }
    desenhaTexto(frase,x,y);
}



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

</script>

Alguém poderia me esclarecer? Eu achei que seria possível resolver sem criar uma nova variável pra Altura!

3 respostas
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Fala Lucas, tudo bom?

A nova variavel somaAltura = somaAltura + altura; é criada para fazer com que o próximo pedaço da barra fique exatamente em cima do anterior. Onde será a origem do novo pedacinho

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]);
                console.log(somaAltura)
        somaAltura = somaAltura + altura;
    }
}

https://codepen.io/soutomario/pen/jLEzQB

Nesse link eu coloquei um console.log no valor para você poder testar

Espero ter ajudado :)

solução!
por Rodrigo Izzo
| 19.2k xp | 8 posts

Fala Lucas! Quando vc usa ali o y para altura, você está sempre somando um valor a mais para altura que não existe.

function desenhaBarra(x,y,serie,cores,frase) {
    for(var i = 0; i <= serie.length; i++) {
        desenhaRetangulo(x,y,x,y,cores[i])
        y = y + serie[i];

Tenta colocar em pratica com os números( o seu for) que voce vai entender

50 50 50 50

50 75 50 75

50 95 50 95

50 100 50 100

Entendeu?? o tamanho da sua barra ta sempre ganhando em altura em vez de ter os tamanhos certos para cada navegador. Os valores certos da terceira coluna deviam ser só os os de valores da série, não y + serie. Se vc declarar soh o serie para a altura, acho que você não precisará de uma nova variável.

a unica alteracao no seu codigo seria

function desenhaBarra(x,y,serie,cores,frase) {
    for(var i = 0; i <= serie.length; i++) {
        desenhaRetangulo(x,y,x,serie[i],cores[i])
        y = y + serie[i];

Espero ter ajudado! Abraço!

por Lucas Alionço Perez
| 57.3k xp | 20 posts

Valeu galera! Logo percebi um segundo erro:

Ao repetir o x como largura na função, a largura da barra também fica dependente desse valor! Precisei dar o valor fixo de largura=50 na função, se não a largura da segunda chamada da barra seria de 150px! O mesmo erro q eu tava cometendo com Y!

Valeu a ajuda de vcs!