Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Dúvida sobre as variáveis "tela" e "pincel". Feedback sobre o código desenvolvido.

Qual a necessidade de chamar duas vezes a mesma variável com os mesmos dados arquivados dentro de duas funções diferente?

No meu caso eu fiz desta forma. Deu certo, mas está correto?

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

    // Desenha Retângulo
    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);
    }

    // Desenha Texto
    function desenhaTexto(x, y, texto) {
        pincel.font='15px Georgia';
        pincel.fillStyle='black';
        pincel.fillText(texto, x, y);                  
    }

Quando iniciei este exercício, acabei não utilizando o "serie.length", coloquei apenas i < 4. Deu certo, mas, a maneira certa é utilizar o "length", poderia, me dar, por favor, algumas dicas sobre?

Ao criar o código, fiz algumas mudanças e adicionei os textos dos números %. Poderia, por favor, me dar um feedback sobre o código?

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

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

    // Desenha Retângulo
    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);
    }

    // Desenha Texto
    function desenhaTexto(x, y, texto) {
        pincel.font='15px Georgia';
        pincel.fillStyle='black';
        pincel.fillText(texto, x, y);                  
    }

    function desenhaBarra(x, y, serie, cores, texto){
        var somaAltura = 0;
        for(var i = 0; i < serie.length; i++){
            var altura = serie[i];
            desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);
            desenhaTexto(x, y - 8, texto);
            desenhaTexto(x + 55, y + somaAltura + 11, altura);

            console.log('y + somaAltura', y + somaAltura);
            somaAltura = altura + somaAltura;
        }    
    }

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

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

</script>

Ah! Gostaria de compartilhar kkkk Eu quebrei muito a cabeça neste exercício, pois, cometi um erro bizarro, por isso, o console.log('y + somaAltura', y + somaAltura). Eu tinha colocado a variável: somaAltura, criando a modificação: somaAltura = altura + somaAltura, antes da função desenhaRetangulo();, dessa forma, ele já modificava para "100", e para que desse certo, era necessário que a posição inicial y, fosse 50.

2 respostas

Oi, Thabata, tudo bem?

Qual a necessidade de chamar duas vezes a mesma variável com os mesmos dados arquivados dentro de duas funções diferente?

Quando você fala da variável, se trata dessa parte aqui?

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

Quando iniciei este exercício, acabei não utilizando o "serie.length", coloquei apenas i < 4. Deu certo, mas, a maneira certa é utilizar o "length", poderia, me dar, por favor, algumas dicas sobre?

O porquê de usar o length ao invés do número diretamente é que sempre você precisará ir nesse linha de código mexer se esse número, o 4, por exemplo, mudar. O length já faz isso por você.

Ao criar o código, fiz algumas mudanças e adicionei os textos dos números %. Poderia, por favor, me dar um feedback sobre o código?

Testei o seu código, ele roda perfeitamente. Porém, é importante deixar a variável pincel declarada por uma boa prática e por entendimento do seu código.

Espero ter te ajudado :}

Olá Laís, tudo bem?

Na última pergunta, você já responde a primeira? Foi, por isso, que o instrutor declarou duas vezes a mesma variável nas duas funções, ao invés, de chamar uma única vez no código? Seria a questão de boa prática, isso?

E sobre o length, vou anotar aqui para não esquecer =D Obrigada pela dica!