Entrar Ainda não tem acesso?
1
resposta

Creeper de um jeito diferente, centralizado na página

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 Sabrina Martins
| 37.6k xp | 2 posts

Fiz com medidas diferentes, tentando centralizar na página do canvas e utilizei cores diferentes também! Mas deu tudo certo no final 

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

<script>

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

    pincel.fillStyle = "lightblue";
    pincel.fillRect(0, 0, 600, 400);

    pincel.fillStyle = "purple";
    pincel.fillRect(120, 50, 350, 300);

    pincel.fillStyle = "black";
    pincel.fillRect (180, 110, 90, 90);

    pincel.fillRect (320, 110, 90, 90);

    pincel.fillRect (260, 200, 70, 100);

    pincel.fillRect (230, 240, 40, 110);

    pincel.fillRect (320, 240, 40, 110);

</script>
1 resposta
por Eduardo De Luna Freire Bueno
| 139.8k xp | 26 posts

Oi Sabrina! fiquei curioso pra ver como ficou com as cores que você usou e o centralizado. adorei o roxo! parabéns!! :)

Como você centralizou, uma sugestão para deixar os espaços iguais do exercício é alterar o eixo X inicial da parte da boca (retângulo 5 e 6). substituir 230 por 220 e 320 por 330.

ficaria assim:

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

<script>

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

    pincel.fillStyle = "lightblue";
    pincel.fillRect(0, 0, 600, 400);

    pincel.fillStyle = "purple";
    pincel.fillRect(120, 50, 350, 300);

    pincel.fillStyle = "black";
    pincel.fillRect (170, 110, 90, 90);

    pincel.fillRect (330, 110, 90, 90);

    pincel.fillRect (260, 200, 70, 100);

    pincel.fillRect (220, 240, 40, 110);

    pincel.fillRect (330, 240, 40, 110);

</script>

bons estudos, Sabrina!