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 Geovani Oliveira Da Luz
| 42.3k xp | 50 posts
Assistente de Gestão Pública 
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frações</title>
</head>
<body>
    <canvas width="600" height="400"></canvas>

    <script>
        var tela = document.querySelector("canvas");
        var pincel = tela.getContext("2d");
        pincel.fillStyle="gray";
        pincel.rect(0,0,600,400);
        pincel.fill();

        function desenhaQuadrado(x, y, tamanho, cor){
            pincel.strokeStyle="black";
            pincel.fillStyle = cor;
            pincel.fillRect(x, y, tamanho, tamanho);
            pincel.strokeRect(x, y, tamanho, tamanho);
        }

        desenhaQuadrado(200, 150, 100, "green");
        desenhaQuadrado(100, 150, 100, "green");
        desenhaQuadrado(300, 150, 100, "green");
        desenhaQuadrado(400, 150, 100, "white");

    </script>
</body>
</html>
1 resposta
por Leonardo Xavier De Souza
| 62.2k xp | 11 posts

Fui objetivo nesse exercício...

<meta charset="UTF-8">

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

<script>

    function desenhaQuadrado(x, y, cor) {

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

        pincel.fillStyle = "green";
        pincel.fillRect(x, y, 50, 50);
        pincel.fillStroke = "black";
        pincel.strokeRect(x, y, 50, 50,);
        pincel.strokeRect(x, y, 100, 50);

    }

    desenhaQuadrado(0, 0, 50, 50);
    desenhaQuadrado(50, 0, 50, 50);
    desenhaQuadrado(100, 0, 50, 50);


</script>