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

Obtive o mesmo resultado mas, seria aceito?

<canvas width="600" height="400"></canvas>
<script>
    tela = document.querySelector('canvas')
    pincel = tela.getContext('2d');

    pincel.fillStyle="lightgray";
    pincel.fillRect(0,0,600,400);

    function desenhaBarra(x, y, serie, texto){
        var cores = ['blue', 'green', 'yellow', 'red'];
        var serie2015 = [50, 25, 20, 5];
        var serie2016 = [65, 20, 13, 2];



        if(serie == 2015){
            var i=0;
            while(i<4){

                pincel.fillStyle = cores[i];
                pincel.fillRect(x, y, 50, serie2015[i]);
                pincel.strokeStyle = "black";
                pincel.strokeRect(x, y, 50, serie2015[i]);
                y = y + serie2015[i];

                i = i+1;
            } 
        }  

        if(serie == 2016){
            var i = 0;
            while(i<4){
                pincel.fillStyle = cores[i];
                pincel.fillRect(x, y, 50, serie2016[i]);
                pincel.strokeStyle = "black";
                pincel.strokeRect(x, y, 50, serie2016[i]);
                y = y + serie2016[i];
                i = i + 1;
            }    
        }

        if(texto == '2015'){    
            pincel.font='15px Georgia';
            pincel.fillStyle='black';
            pincel.fillText(texto, 50, 40);
        }else{
            pincel.font='15px Georgia';
            pincel.fillStyle='black';
            pincel.fillText(texto, 150, 40);
        }

    }  

    desenhaBarra(50, 50, 2015,'2015'); 
    desenhaBarra(150, 50, 2016,'2016'); 




</script>
4 respostas

Eu tambem fiz de forma diferente, no resultado do monitor, ele sua diversas funções, mas eu acabei usando somente uma, acho mas facil o entendimento, com muitas funções eu acabo me perdendo:

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

<script>
    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");

    pincel.fillStyle = "gray";
    pincel.fillRect(0,0,600,600);


    function desenhaBarra(x, y, serie, cores, texto) {
        // aqui precisamos usar fillRect, strokeRect, etc 
        var tela = document.querySelector("canvas");
        var pincel = tela.getContext("2d");



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

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

            if (i == 0 ) {

                pincel.fillStyle = cores[i]
                pincel.fillRect(x, y, 50, serie[i]);
                pincel.fillStyle = "black"
                pincel.strokeRect(x, y, 50, serie[i])

            } else {

                pincel.fillStyle = cores[i]
                pincel.fillRect(x, y + total, 50, serie[i]);
                pincel.fillStyle = "black"
                pincel.strokeRect(x, y + total, 50, serie[i])
            }

            total = total + serie[i];

        }     
    }   

    var serie2015 = [50, 25, 20, 5];
    var serie2016 = [65, 20, 13, 2];
    var cores = ['blue', 'green', 'yellow', 'red'];
    desenhaBarra(50, 50, serie2015, cores, '2015');
    desenhaBarra(150, 50, serie2016, cores, '2016');



</script>
solução!

Olá Nathalia e André,

Os dois códigos estão corretos e são aceitos sim. Existem diversas formas de chegarmos ao mesmo resultado em programação.

Em relação ao comentário acima do André sobre funções, o ideal e o que as recomendações de melhores práticas recomendam é que você realmente divida seu código em diversas funções.

Uma função para cada tarefa específica do código. Essa é a regra adotada.

Vantagens em dividir o código em várias funções:

1 - Facilita o desenvolvimento (desenvolvimento modular): implementa-se uma particular unidade, um trecho menor, concentrando-se nele, até que ele esteja funcionando com alto grau de confiabilidade;

2 - Organização: o código fica melhor organizado e portanto mais fácil de ser mantido;

3 - Reaproveitamento: sempre que precisar aplicar o código encapsulado em qualquer outro trecho de código (ou noutro código), pode-se utilizar aquele que já foi implementado e é confiável.

Vai funcionar tudo em uma única função? Vai. Mas a legibilidade e a manutenção futura do código ficam extremamente prejudicadas. Sempre temos que ter em mente que outros desenvolvedores vão trabalhar com nosso código. Será que agrupando tudo em uma única função fica claro o que aquela função faz? Ou mesmo quem desenvolveu e for analisar esse código um tempo depois vai ter claro em sua mente o que aquela função faz?

Então, quanto mais você dividir seu código em tarefas específicas para cada função melhor. Pode parecer irrelevante em um código pequeno mas imagina um código com milhares ou milhões de linhas.

Quando percebemos que o código dentro de uma função está muito além do que foi proposto para ela é hora de criar uma nova função. Com o tempo isso vai clareando e vocês vão perceber o quão é mais vantajoso trabalhar com 1000 funções que realizam pequenas tarefas do que com 10 que realizam diversas tarefas.

Bons estudos!

Entendi, obrigado por responder André Alexandre Stella !

Qualquer dúvida não deixem de perguntar no fórum.

Bons estudos!