Entrar Ainda não tem acesso?
1
resposta

[Projeto] Creeper medidas olhometro

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 Verônica Maciel
| 49.2k xp | 3 posts
<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    //cabeça
    pincel.fillStyle = 'green';
    pincel.fillRect(0,0,350,300);

    //olhos
    pincel.fillStyle = 'black';
    pincel.fillRect(50,50,90,90);
    pincel.fillRect(210,50,90, 90);

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

    // boca ou barba
    pincel.fillStyle = 'black';
    pincel.fillRect(210,190,40, 110);
    pincel.fillRect(100,190,40, 110);

</script>
![imagem codigo html e pagina web ](https://cdn1.gnarususercontent.com.br/1/1424414/04a3db38-54f1-436f-92b5-1e8b241e6f2a.jpg)
1 resposta
por Otávio Prado
| 4791.8k xp | 9225 posts

Olá Verônica!

Muito bom!

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

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

    // cabeça
    pincel.fillStyle = 'darkgreen';
    pincel.fillRect(200,50,350,300);

    // olhos
    pincel.fillStyle = 'black';
    pincel.fillRect(250, 110, 90, 90);
    pincel.fillRect(410, 110, 90, 90);

    // nariz
    pincel.fillRect(340, 200, 70, 100);

    // boca ou barba
    pincel.fillRect(300, 240, 40, 110);
    pincel.fillRect(410, 240, 40, 110);    
</script>