Entrar Ainda não tem acesso?
4
respostas

Minha solução - Será que compliquei demais?

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 Marcos Aurelio Tadeu da Silva
| 91.4k xp | 229 posts

Pessoal, segue abaixo o meu resultado. Sei que compliquei demais, mas está funcionando...rsrs

Fiz uso dos arrays, só não consegui implementar os loops:

<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'white';
    pincel.fillRect(0, 0, 600, 400);

    function desenhaTexto(texto, x, y) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.font = '20px Georgia';
        pincel.fillStyle = 'black';
        pincel.fillText(texto, x, y);
    }


    desenhaTexto("2015", 50, 30);
    desenhaTexto("2016", 150, 30);


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

    function desenhaBarra(x, y, largura, altura, cores) {

        pincel.fillStyle = cores;
        pincel.fillRect(x, y, largura, altura);
        pincel.strokeStyle = 'black';
        pincel.strokeRect(x, y, largura, altura);

    }       
    //Barra 1
    desenhaBarra(50, 50, 50, 50, cores[0]);
    desenhaBarra(50, 100, 50, 25, cores[1]);
    desenhaBarra(50, 125, 50, 20, cores[2]);
    desenhaBarra(50, 145, 50, 5, cores[3]);

    //Barra 2
    desenhaBarra(150, 50, 50, 65, cores[0]);
    desenhaBarra(150, 115, 50, 20, cores[1]);
    desenhaBarra(150, 135, 50, 13, cores[2]);
    desenhaBarra(150, 148, 50, 2, cores[3]);

</script>
4 respostas
por Millena Gená Pereira
| 878.2k xp | 1503 posts
Instrutor Instrutora de dados

Oi Marcos!

Sua solução também funciona. Mandou bem!

Você resolveu de outra forma, sem a utilização dos laços. A diferença foi que você realizou o trabalho que o laço faria, "manualmente", e está tudo bem, em programação sempre existe mais de uma maneira de resolver o mesmo problema :)

É sempre interessante tentarmos resolver os exercícios da forma que conseguirmos antes de olharmos a solução do professor, isso nos ajuda a fixar o conhecimento adquirido. Parabéns por fazer isso!

Se tiver alguma dúvida é só falar, tá bom? Estarei por aqui.

Bons estudos!

por Marcos Aurelio Tadeu da Silva
| 91.4k xp | 229 posts

Oi Milena!

Obrigado. :)

Entendi.

É, fiz o trabalho "na mão"...rsrsrs

Muito obrigado.

por Leandro Iliziario
| 13.4k xp | 5 posts

Ola, Marcos.

Graças a sua resolução, eu consegui compreender como fazer esse gráfico. Sobre aquela variável 'i' que foi utilizada na questão do professor, ainda estou sem entender.

Passando apenas pra agradecer.

Muito Obrigado!!!

<canvas width="800" 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 Times';
        pincel.fillStyle='black';
        pincel.fillText(texto, x, y);    
    }

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


        pincel.font='20px Times';
        pincel.fillStyle='black';
        pincel.fillText('NAVEGADORES QUE OS ALUNOS ALURA MAIS UTILIZARAM EM 2015 E 2016.', 20, 20);


    desenhaTexto(20, 20+50, '2015');
    desenhaTexto(100, 20+50, '2016');

    //serie2015;
    desenhaRetangulo(10, 30+50, 50, 50, 'blue');
    desenhaRetangulo(10, 80+50, 50, 25, 'green');
    desenhaRetangulo(10, 105+50, 50, 20, 'yellow');
    desenhaRetangulo(10, 125+50, 50, 5, 'red');

    //serie2016;
    desenhaRetangulo(90, 30+50, 50, 65, 'blue');
    desenhaRetangulo(90, 95+50, 50, 20, 'green');
    desenhaRetangulo(90, 115+50, 50, 13, 'yellow');
    desenhaRetangulo(90, 128+50, 50, 2, 'red');

    //sigla;
    desenhaRetangulo(10, 160+50, 10, 10, 'blue');
    desenhaRetangulo(10, 190+50, 10, 10, 'green');
    desenhaRetangulo(10, 220+50, 10, 10, 'yellow');    
    desenhaRetangulo(10, 250+50, 10, 10, 'red');

    //descriçãoSigla;
    desenhaTexto(25, 170+50, 'Chrome');
    desenhaTexto(25, 200+50, 'Firefox');
    desenhaTexto(25, 230+50, 'Safari');
    desenhaTexto(25, 260+50, 'Outros (Opera, IE, Edge, etc).');



</script>
por Marcos Aurelio Tadeu da Silva
| 91.4k xp | 229 posts

Oi Leandro,

Poxa, fico imensamente feliz em saber que minha solução te ajudou. :)

E por nada. ;)