Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Não consegui

MAIS UMA VEZ não consegui. As outras atividades até consegui, mas essa não consegui nada. Dá até vontade de desistir.

6 respostas

Publica o código aqui, Vinicius! Vamos ver o que não está saindo como deveria... Deve ser algo simples que tu está deixando passar.

Apenas o proposto pela atividade e não consegui desenvolver o restante da atividade.

<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) {

    }

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


</script>
solução!

Pelo que vi no seu codigo, a função desenhaBarra() está vazia, ali teria de ter que usar estruturas de loop. Quando se usa array tem de ter uma estrutura de loop para que possa rodar todos os itens que estão dentro dele, senão ele não puxa os valores.

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

    }

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

Teria de dar uma arrumada na implementação igual o instrutor fez.

function desenhaBarra(x, y, serie, cores, texto) {
    desenhaTexto(x+5,y-5,texto);
    var somaAltura=0;

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

Ok, seguinte. Como está trabalhando com arrays, é necessário ter uma estrutura de repetição para conseguir percorrer o array e ver seus valores. Então tem de criar um FOR para o array que vc deseja olhar, no caso a series2015. series2015.length -> irá olhar o array e contar quantos elementos tem dentro dele. (quatro elementos -> 50, 25, 20, 5).

É criado uma variavel altura para que possa pegar o valor de cada altura a cada vez que o FOR rodar.

Var altura = series2015[0] -->50       ---> lembre que um array sempre começa da posição zero
Var altura = series2015[1] -->25
Var altura = series2015[2] -->20
Var altura = series2015[3] -->5

Ao você chamar sua função desenhaRetangulo(x, y+somaAltura, 50, altura, cores[i]); Note que tudo que vc coloca dentro dos () são parametros, vc está dizendo que sua função desenhaRetangulo irá receber os valores de x, y, somaAltura, 50, altura, array de cores.

A posição do canvas é tipo um grafico em matematica correto? X (do topo esquerdo para top direita) e Y (do topo esquerdo para baixo exquerda). Os valores começam com 0 na posição inicial (então o canto esquerdo do topo de sua tela é 0,0).

x,y ---------------->
 |
 |
 |
 v

Note que ao passar o parametro Y na sua função, apareceu Y +somaAltura né? Pq isso? O acumulador de altura vai dizer que a cada vez que vc cria um retangulo, o próximo tem de ir para baixo (eixo Y), se não tiver o somaAltura ali, fica sendo criado em cima do outro.

Deposi que o retangulo é criado, note outro código a seguir somaAltura+=altura; O que isto significa?

Isto quer dizer que após criar o retangulo, nosso acumulador precisa lembrar da altura do retangulo que criamos, para poder utilizar isso para dizer ao próximo retangulo que sua posição deverá ser após o retangulo anterior, assim não ficará empilhado.

somaAltura = somaAltura + altura;
ou
somaAltura+= altura;    ---> ambas formas funcionam

Espero que tenha conseguido ajudar um pouco, eu também apanhei na manutenibilidade do código aí fui estudar como o instrutor tinha separado as funções kkkk.

E deixa eu te dizer, desistir jamais cara. Programação é muito treino mesmo, aos poucos tu vai pegando o jeito. Força aí :D

Alysson, muito obrigado pela aula. Foi realmente uma aula, excelente sua explicação.

Provavelmente eu irei revisionar esse conteúdo novamente. Não sei porquê, mas aulas com JavaScript tenho uma certa dificuldade.

Mas obrigado pelo incentivo e palavras, não quero parar de estudar, não quero parar de aprender, não quero desistir.

Ja revi tudo mil vezes e ainda não entendi nada desse exercício

Irei indicar um livro bacana para tu então, chama "Lógica de Programação e algoritmos com Javascript" do autor Edécio Fernando Lopes. Editora Novatec.

Está na 2ª edição (atualizado com ES6) , eu comprei ele semanas atrás e achei muito útil. Pode comprar sem medo no site da editora novatec, que irá lhe ajudar bastante. :D