Entrar Ainda não tem acesso?
1
resposta

Frações

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Extraindo funções e atividade Frações

por Shaian Ari Griga
| 34.8k xp | 49 posts
Professor

Minha resolução:

<canvas width “600” heigth “400”> </canvas> 

<script>

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

    function quadrados(x) {

        pincel.fillStyle = "green";
        pincel.fillRect(x,0,50,50);
    } 

    function contorno(x) {

        pincel.strokeStyle = "black";
        pincel.strokeRect(x,0,50,50);
    }

    for(x = 0; x < 200; x = x + 50) { 

            quadrados(x);
        }

    for(x = 0; x < 300; x = x + 50) { 

            contorno(x); 
        }




</script>
1 resposta
por Grazielle Melo Borges Torres
| 132.7k xp | 88 posts
<meta charset="UTF-8">

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

<script>

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

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

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

    function escreveCabecalho(texto, x, y) {
        let tela = document.querySelector('canvas');
        let pincel = tela.getContext('2d');

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

    escreveCabecalho('Qual é a fração?', 5, 80);
    desenhaQuadrado(0, 100, 50, 50, 'green');
    desenhaQuadrado(50, 100, 50, 50, 'green');
    desenhaQuadrado(100, 100, 50, 50, 'green');
    desenhaQuadrado(150, 100, 50, 50, 'white');

</script>