Entrar Ainda não tem acesso?
1
resposta

Creeper, esse é o caminho?

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 CRISTIAN APARECIDO DE ALMEIDA ASSINI
| 20.2k xp | 11 posts
<canvas width="600" height="400"></canvas>

<script>

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

    pincel.fillStyle = 'black';
    pincel.fillRect(0, 0, 600, 400);

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

    pincel.fillStyle = 'black';
    pincel.fillRect(175, 100, 90, 90);

    pincel.fillStyle = 'black';
    pincel.fillRect(335, 100, 90, 90);

    pincel.fillStyle = 'black';
    pincel.fillRect(265, 190, 70, 100);

    pincel.fillStyle = 'black';
    pincel.fillRect(230, 240, 40, 110);

    pincel.fillStyle = 'black';
    pincel.fillRect(330, 240, 40, 110);

</script>
1 resposta
por Akemi Alice
| 852.4k xp | 2192 posts
Alura Scuba Team Monitora no Scuba Team

Olá, Cristian! Como vai?

Excelente, seu creeper ficou muito bacana!

Apenas deixo uma dica, caso queira simplificar seu código. Não há necessidade de escrever pincel.fillStyle='black'; cada vez que for desenhar um novo elemento preto, declarando uma vez a cor, os próximos desenhos ficarão com a cor escolhida. Veja:

<script>

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

    pincel.fillStyle = 'black';
    pincel.fillRect(0, 0, 600, 400);

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

    pincel.fillStyle = 'black';
    pincel.fillRect(175, 100, 90, 90);
    pincel.fillRect(335, 100, 90, 90);
    pincel.fillRect(265, 190, 70, 100);
    pincel.fillRect(230, 240, 40, 110);
    pincel.fillRect(330, 240, 40, 110);

</script>

Qualquer dúvida, estamos sempre por aqui.

Abraços e bons estudos!