7
respostas

Encontrando as coordenadas! 2

A minha duvida foi sobre encontrar as coordenadas, fiquei um bom tempo tentando fazer o exercício, depois de algum tempo ajustando consegui fazer o código mas ainda estou com a pulga atrás da orelha sobre as coordenadas. Verificando aqui no fórum, um amigo fez o código exatamente igual ao meu, descobrindo as coordenadas "na raça" uhsahusahusauh, li a explicação da instrutora Thais e embaralho mais ainda a minha cabeça , gostaria de uma nova explicação sobre o exercício pois pra mim ficou muito confuso.

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

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

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

    //Retangulo 2 e 3 (olhos)

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

    //Retangulo 4 (nariz)

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

    //Retangulo 4 e 5 (parte da boca)

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


</script>
7 respostas

Desculpe, não sei se entendi direito sua dúvida. Mas as coordenadas são dadas em pixels. E a quantidade de pixels depende da resolução de cada monitor.

O que eu faço, para me orientar, é definir um elemento no centro da tela (independente da resolução) e basear todos os demais posicionamentos com base nele. Exemplo de como posicionar no meio:

position:absolute; left:50%; top:50%; margin-left:-110px; margin-top:-40px;

Olá Aline, tudo bem. Oque acontece é o seguinte, no exercício o professor ele só te dar a altura e a largura do retângulo que tem que ser pintada, porém não te diz a coordenada aonde esse retângulo vai está posicionado. Assim o execício fica muito mais complicado pois teremos que fazer um calculo para achar as coordenadas de posicionamento dos retângulos.

Entendi.

Não estou acompanhando esta aula para te ajudar especificamente nessa dúvida. Mas sim, o certo é fazer as contas para posicionar o elemento na tela. Mas o correto seria o professor dar-lhe as coordenadas, ou ao menos, explicar como ele posicionou.

Enfim, espero que alguém que esteja acompanhando esse curso possa lhe auxliar melhor.

Valeu Aline pela a ajuda, consegui resolver o exercício, mas queria saber do pessoal que está fazendo a carreira (Lógica de programação II) qual foi o pensamento para resolver a questão. Mas muito obrigado mesmo !! =D

Também fiquei com dúvida.

A cabeça por exemplo, ele da os pixels 350 e 300, porém somente com isso não consegui avançar. Vi que na resposta tem o parâmetro : pincel.fillRect(200, 50, 350 ,300); Da onde surgiu o 200 e 50? Fiquei perdido.

Também fiquei com a mesma dúvida

Boa pessoal!!!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software