1
resposta

Dúvida coordenadas

Fiz esse código e deu tudo certo!!

Mas fiquei com dúvidas nas coordenadas.

Alguém para explicar melhor o assunto??

<canvas width="500"  height ="360"></canvas>

<script>

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

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

    pincel.fillStyle = "black";

    pincel.fillRect(90, 90, 90, 90);//olho1


    pincel.fillRect(270, 90, 90, 90);//olho2


    pincel.fillRect(180, 180, 90, 120);//nariz


    pincel.fillRect(150, 250, 40, 100);//bigode1



    pincel.fillRect(270, 250, 40, 100);//bigode2




</script>
1 resposta

Fala, Mateus! Espero que esteja tudo bem!!!

Desculpe a demora em dar um retorno

O canvas parte do início da grade de tela ou espaço de coordenadas, partindo o início que temos essas coordenadas X (horizontais) e Y(verticais). Tendo isso como base vemos o quadro abaixo

Grade de Tela - coordenadas X e Y

Tendo essa imagem como referência acaba ficando mais traquilo de se localizar dentro de canvas e também para posicionar as figuras.

Peço que dê uma olhada neste link onde aborda esse tema de maneira mais aprofundada!

Espero ter ajudado, Mateus!

Um abraço e bons estudos!!!