Exercício com legendas | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Fábio

| 134.8k xp | 11 posts

Fiz o exercício com legendas

<meta charset="UTF-8">
<canvas width="700" height="500"></canvas>

<script>

    function desenhaQuadrado(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 desenhaLegenda(x, y, cores, legenda)   {

        var altura = 50;

        for (var i = 0; i < legenda.length; i++)  {
            desenhaQuadrado(x, altura, 10, 10, cores[i]);
            desenhaTexto(x+15, altura+10, legenda[i]);
            altura = altura + 20;

        }

    }

    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];
            desenhaQuadrado(x, y + somaAltura, 50, altura, cores[i]);
            somaAltura = somaAltura + altura;
        }            

    }

        var serie2015 = [50, 25, 20, 5];
        var serie2016 = [65, 20, 13, 2];

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

        var legenda = ['Chrome', 'Firefox', 'Safari', 'Outros'];

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


</script>

O que acharam?

2 respostas

por Otávio Prado

| 4789.8k xp | 9225 posts

20/02/2019

Fala Fábio,

Muito bom.

solução!

por Leandro Fiore Francischetti

| 82.1k xp | 15 posts

24/02/2019

Olá Fábio, rodei seu código aqui e gostei bastante do resultado, só uma observação

Você faz essa chamada para exibir as legendas:

desenhaLegenda(250, 50, cores, legenda);

passando para a função o parâmetro y = 50:

    function desenhaLegenda(x, y, cores, legenda)   {
        var altura = 50;

        for (var i = 0; i < legenda.length; i++)  {
            desenhaQuadrado(x, altura, 10, 10, cores[i]);
            desenhaTexto(x+15, altura+10, legenda[i]);
            altura = altura + 20;
        }
    }

mas perceba que a função desenhaLegenda não usa o parâmetro y em nenhum momento, e ainda foi criado uma variável altura com um valor fixo 50, que é exatamente o mesmo valor passado para o parâmetro y. Ou seja se você precisa deslocar a legenda no eixo y não vai rolar, pq o parâmetro y não é utilizado e foi fixado pela variável altura em 50. Eu fiz um ajuste aqui e ficou assim a função:

    function desenhaLegenda(x, y, cores, legenda)   {

        for (var i = 0; i < legenda.length; i++)  {
            desenhaQuadrado(x, y, 10, 10, cores[i]);
            desenhaTexto(x+15, y+10, legenda[i]);
            y = y + 20;
        }
    }

dessa forma eu posso deslocar tambem o eixo y da legenda pela tela sem precisar ajustar a função, por exemplo com a chamada:

desenhaLegenda(250, 100, cores, legenda);

Abraços, Leandro

Mergulhe em programação