1
resposta

Achar pontos inicias de maneira mais fácil.

Gostaria de saber se há alguma forma de descobrir como achar os pontos inicias de uma maneira mais fácil, consegui chegar no resultado, mas até ai quebrei a cabeça pra achar as posições corretas dos retângulos, tem alguma outra maneira ou é só no olho mesmo?

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

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

    pincel.fillStyle = 'lightGrey';
    pincel.fillRect (0, 0 , 600, 400)//fundo

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

    pincel.fillStyle = 'black';
    pincel.fillRect (170,111, 90 , 90);//olhos
    pincel.fillRect (330,111,90,90);

    pincel.fillSyle = 'black';
    pincel.fillRect (260,200,70,100);//nariz

    pincel.fillSyle = 'black';
    pincel.fillRect (220,240,40, 110);//boca
    pincel.fillRect (330 ,240,40,110)


</script>
1 resposta

Fala, Henrique! Tudo bem contigo?

Neste caso sim! Para desenhar no canvas temos que saber as coordenadas.

Agora, para facilitar ou mesmo enxugar a escrita de código, dê uma olhada nessa lógica postada pelo José Miranda onde ele deixou mais enxuto e temos também a postagem do Alisson que faz a utilização de funções para a construção do Creeper, mas todas as soluções tem que definir as posições para desenhar.

Espero ter contribuído, Henrique!

Um abraço e bons estudos!