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

Realizei o código de maneira diferente, resultado interessante!

Tentei realizar o código de maneira diferente pra tornar ele dinâmico, podendo fazer a alteração das quantidades de quadrados coloridos e de quadrados não coloridos, podendo alterar as frações! Consegui chegar num resultado satisfatório, mas acho que ainda posso melhorar um pouco mais pra tornar ele mais fácil de ser visualizado por outras pessoas que eventualmente gostariam de utilizar a ferramenta.

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

<script>

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

    /* Utilize o parâmetro "z" para definir a quantia de quadrados vazios
    em razão dos que serão coloridos!
    */

    function desenhaQuadrado(x, z, y, tamanho, corUm, corDois){
        pincel.fillStyle = corUm;
        pincel.fillRect(x, y, tamanho, tamanho);
        pincel.strokeStyle = corDois;
        pincel.strokeRect(x, y, tamanho + z, tamanho);
    };

    var x = 0;

    function montaFracao(){
        while(x < 150){
            desenhaQuadrado(x, 50, 50, 50, 'green', 'black');
            x = x + 50;
        }
    }

    pincel.font='20px Georgia';
    pincel.fillStyle='black';
    pincel.fillText("Qual é a fração?", 0, 30);

    montaFracao();

</script>
1 resposta

Fala, Oscar! Espero que esteja bem!

Desculpe a demora em dar um retorno!

Ficou muito bacana, meu amigo!

Somente um ponto eu alteraria, mais por organização na estrutura do código. Colocaria os métodos do pincel

    pincel.font='20px Georgia';
    pincel.fillStyle='black';
    pincel.fillText("Qual é a fração?", 0, 30);

no início juntamente onde a variável é criada.

Pensando em um projeto grande com muitas linhas de código, agrupar métodos e variáveis vai facilitar em uma refatoração de código. Principalmente quando trabalhamos em equipe!

Bacana, Oscar!

Um abraço e bons estudos

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