1
resposta

[Projeto] Desta forma também estaria correto?

    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(x, y, texto) {

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

    function desenhaBarra15(x, y) {

        desenhaRetangulo(x, y, 55, 50, "blue");
        desenhaRetangulo(x, y+50, 55, 25, "green");
        desenhaRetangulo(x, y+75, 55, 20, "yellow");
        desenhaRetangulo(x, y+95, 55, 5, "red");
        desenhaTexto(150, 270, "2015");
    }

    function desenhaBarra16(x, y) {

        desenhaRetangulo(x, y, 55, 65, "blue");
        desenhaRetangulo(x, y+65, 55, 20, "green");
        desenhaRetangulo(x, y+85, 55, 13, "yellow");
        desenhaRetangulo(x, y+98, 55, 2, "red");
        desenhaTexto(400, 270, "2016");
    }

    desenhaBarra15(150, 150);
    desenhaBarra16(400, 150);

</script>
1 resposta

Oi Andrey, tudo bem?

Obrigado pela paciência em obter uma resposta!

Dei uma olhada no seu código, mas a parte inicial não foi colocada, por isso complementei com os comandos abaixo para conseguir ver o resultado obtido.

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

<script>

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

Sua lógica está correta e seu código apresenta clareza, coerência e boa indentação. Contudo é possível incrementar os comandos e deixar a linguagem mais sucinta, por meio do uso de listas e loops de repetição na função desenhaBarra.

Com isso, o código referente a esta parte seria escrito da seguinte maneira:

var cores = ['blue','green','yellow', 'red'];
var serie2015 = [50,25,20,5];
var serie2016 = [65,20,13,2];

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

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

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição para te auxiliar.

Grande abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado! ✓.