1
resposta

Por que a minha boca/barba do creeper está saindo errado?

<canvas width="600" height="400"></canvas>
<script>
    var tela=document.querySelector('canvas');
    var pincel=tela.getContext('2d');
    //Tela de fundo
    pincel.fillStyle='lightgrey';
    pincel.fillRect(0,0,600,400);
    //Cabeça
    pincel.fillStyle='darkgreen';
    pincel.fillRect(125,50,350,300);
    //Olhos
    pincel.fillStyle='black';
    pincel.fillRect(175,110,90,90);
    pincel.fillRect(335,110,90,90);
    //Nariz
    pincel.fillRect(265,200,70,100);
    //Boca ou barba
    pincel.fillRect(225,245,40,110);
    pincel.fillRect(335,245,40,110);
    //Ela sai um pouco pra baixo da cabeça!
</script>
1 resposta

Olá, Celso! Tudo bom?

Desde já, agradeço a paciência em aguardar uma resposta!

Quando fazemos uso do método fillRect, precisamos passar quatro parâmetros muito importantes:

  • Coordenada do eixo x, que representa o ponto inicial do retângulo horizontalmente;
  • Coordenada do eixo y, que representa o ponto inicial do retângulo verticalmente;
  • O comprimento horizontal do retângulo;
  • A altura do retângulo.

A sintaxe para isso pode ser vista logo abaixo:

fillRect(x, y, comprimento, altura);

Ao desenhar a boca do Creeper, foi passado como coordenada referente ao eixo y o ponto 245. Para que o retângulo não ultrapasse a cabeça dele, podemos alterar tal valor para 240. Com isso, chegamos no seguinte resultado:

//Boca ou barba
pincel.fillRect(225,240,40,110);
pincel.fillRect(335,240,40,110);

Por meio dessa alteração, fazemos com que os pontos iniciais do desenho comecem mais acima, haja vista que os valores do eixo y, no universo da programação, crescem de cima para baixo.

Por fim, gostaria de dizer que alterei o seu tópico com objetivo de formatar o código que você compartilhou conosco.

Para realizar isso, você pode seguir os passos que estão logo abaixo. Sem a formatação correta, o código acaba ficando escondido no post final.

  • No seu terminal, selecione e copie a seção com o código;
  • Aqui no fórum, procure o ícone </>. É a sétima opção na aba superior do nosso editor de texto;
  • Cole o código copiado entre as duas linhas que surgirem.

Para confirmar se está tudo certo, você pode pré-visualizar seu post clicando no último ícone da esquerda para a direita, ou também usando o atalho F9.

Fico à disposição para te ajudar caso surjam dúvidas ao decorrer dos seus estudos!

Grande abraço, Celso!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado! ✓.