Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Incrementei algumas coisas, gostaria de saber se poderia ter feito de forma mais simples os adicionais

<meta charset="utf-8">

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

<script>

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

    function desenhaRetangulo(x,y,largura,altura,cor){

        pincel.fillStyle = cor;
        pincel.strokeRect(x,y,largura,altura);
        pincel.fillRect(x,y,largura,altura);
    }


    function desenhaTexto(x,y,texto){

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

    var serie2015 = [50,25,20,5];
    var serie2016 = [65,20,13,2];
    var legenda = ['Chrome','Firefox','Safari','Outros (Opera,IE,Etc)'];
    var cores = ['blue','green','yellow','red'];


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

        var somaAltura = 0;

        desenhaTexto(x,y - 15,texto);

        for(var i = 0; i < serie.length; i++){

            var altura = serie[i] *2;

            desenhaRetangulo(x,y + somaAltura,50,altura,cores[i]);

            somaAltura = somaAltura + altura;

        }
    }


    function desenhaLegenda(){

        var altura = 0

        for(var i = 0; i < cores.length; i++){



            desenhaTexto(380,50 + altura,legenda[i]);

            desenhaRetangulo(320,20 + altura,50,50,cores[i]);

            altura = altura + 60;

        }
    }


    function desenhaIndice(x,serie){

        var somaAltura = 0;

        for(var i = 0; i < serie.length; i++){

            var altura = serie[i] * 2;

            desenhaTexto(x,60 + somaAltura,serie[i] + "%");

            somaAltura = somaAltura + altura;
        }
    }


    desenhaBarra(60,50,serie2015,cores,'2015');
    desenhaBarra(220,50,serie2016,cores,'2016');
    desenhaLegenda();
    desenhaIndice(19,serie2015);
    desenhaIndice(179,serie2016);

</script>
1 resposta
solução!

Oi, Hudson, tudo bem?

Testei o seu código e observei os incrementos, ficou bem legal. Maior e com legenda, né? Parabéns. E sobre ser mais simples, está correta a lógica, sucinta :}

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software