Entrar Ainda não tem acesso?
2
respostas

Creep

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Desenhando gráficos com Canvas e atividade A cara do Creeper

por Gabriel Lima Figueredo
| 44.7k xp | 9 posts

Fiz diferente do professor, meus números não segui a linha de racicionio dele, todavia, acredito que ficou bom, quem discorda é clubista.

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

<script>

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

    pincel.fillStyle = 'darkgreen';
    pincel.fillRect(0, 0, 350, 300) 

    pincel.beginPath();
    pincel.fillStyle = 'black'
    pincel.fillRect(50, 75, 90, 90);

    pincel.beginPath();
    pincel.fillStyle = 'black'
    pincel.fillRect(200, 75, 90, 90);

    pincel.beginPath();
    pincel.fillStyle = 'black'
    pincel.fillRect(200, 75, 90, 90);

    pincel.beginPath();
    pincel.fillStyle = 'black'
    pincel.fillRect(135, 150, 70, 100);

    pincel.beginPath();
    pincel.fillStyle = 'black'
    pincel.fillRect(100, 190, 40, 110);

    pincel.beginPath();
    pincel.fillStyle = 'black'
    pincel.fillRect(200, 190, 40, 110);



</script>

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas
por Jose Roberto De Siqueira
| 35.2k xp | 26 posts
assistente de administração

Ficou excelente. Pode limpar um pouco o código tirando esses beginPath() que não precisa quando usa o fillRect e uma vez que você definiu o fillStyle como 'black', então não precisa repetir ele também. Meu código ficou assim:

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

    <script>

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

        pincel.fillStyle = 'darkgreen';
        pincel.fillRect(0, 0, 350, 300);

        pincel.fillStyle = 'black';
        pincel.fillRect(50, 50, 90, 90);
        pincel.fillRect(210, 50, 90, 90);
        pincel.fillRect(140, 140, 70, 100);
        pincel.fillRect(100, 185, 40, 110);
        pincel.fillRect(210, 185, 40, 110);

    </script>
por Gabriel Lima Figueredo
| 44.7k xp | 9 posts

Vou ter que concordar que o meu ficou poluido, obrigado pela dica bro.