Entrar Ainda não tem acesso?
1
resposta

assim foi como consegui

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 Bruno Cesar de Melo Pessoa
| 47.6k xp | 11 posts
<canvas width="600" height="400"></canvas>

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

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

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

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

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

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

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



</script>
1 resposta
por Wanderson Macêdo
| 3966.1k xp | 8086 posts
Instrutor Desenvolvedor

Wow, isso mesmo Bruno! Direto e prático! Que tal um desafio? Veja por exemplo que você tá sempre usando o pincel e pintando a forma. Como isso poderia ficar isolado em uma função para que eu não repita essas linhas e chame apenas a função várias vezes assim:

desenhaForma('green', 0, 0, 350, 300);
desenhaForma('black', 46, 50, 90, 90);

Note que essas duas linhas, substituem essas quatro duas:

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

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

Eae, como seria a função desenha forma?