Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Está correto o raciocínio e a resposta?

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

<script>
var tela = document.querySelector ('canvas'); // Criar tela
var pincel = tela.getContext ('2d'); //getContext >> Tipo de pincel, criação do pincel | 2d >> parametro com a dimensão do gráfico.


// RETANGULO 1 >> 350, 300 (cabeça)
pincel.fillStyle = 'darkgreen';
pincel.fillRect(0, 0, 350, 300);
//1. FAZ O FUNDO VERDE. 0 >> X  | 0 >> Y (ponto de inicio) | 350 >> LARGURA | 300 >> ALTURA  (DIMENSÃO A PARTIR DO PONTO X E Y)


// RETANGULO 2 >> 90, 90 (olhos).
pincel.fillStyle = 'black';
pincel.fillRect(50, 50, 90, 90);
//3.  LARGURA: (140 - 90 = 50) - PS: 140 DO RETANGULO 4   |||  ALTURA: (140 - 90 = 50) - PS: 140 DO RETANGULO 4 


// RETANGULO 3 >> 90, 90 (olhos).
pincel.fillStyle = 'black';
pincel.fillRect(210, 50, 90, 90);
//4.  LARGURA: (140 + 70 = 210) - PS: DADOS DO RETANGULO 4   |||  ALTURA: (140 - 90 = 50) - PS: 140 DO RETANGULO 4 



// RETANGULO 4 >> 70, 100 (nariz)
pincel.fillStyle = 'black';
pincel.fillRect(140, 140, 70, 100);
// 2: Raciocinio >> 350 / 2 = 175. Pois o nariz esta no centro e tem 70 px de comprimento. Entao descobre-se o centro e a partir deste ponto destina-se 35 px para cada lado. Ou seja: inicia em 140 >> (175 - 35 = 140) e vai até 210 px >> (175 + 35 = 210). A ALTURA: O total é de 300 e os retangulos 5 e 6 tem 110 px, e o retangulo 4 tem 100, mas a metade esta dentro do 5 e 6, entao contabilizo apenas 50. Fica assim >> 300 - 110 - 50 = 140 px 


// RETANGULO 5 >> 40, 110 (parte da boca).
pincel.fillStyle = 'black';
pincel.fillRect(100, 190, 40, 110);
// LARGURA: X DO RETANGULO 4 >> 140 - 40 PX (RET 5) = 100 ||| COMEÇEI POR AQUI > ALTURA: (ALTURA TOTAL>> 300 - 110 = 190) 



// RETANGULO 6 >> 40, 110 (parte da boca).
pincel.fillStyle = 'black';
pincel.fillRect(210, 190, 40, 110);
// LARGURA: RET 4 INICIO X >> 140 + 70 = 210    |||  ALTURA: A MESMA D RETANGULO 5 >> 190


</script>
2 respostas
solução!

Opa Lucas, tudo bem com você?

O seu raciocínio está certíssimo, proporcionou certinho a simetria baseada no tamanho inicial :)

Vou te dar apenas uma dica para quando quiser colocar comentários grandes em seu código, podemos utilizar da seguinte maneira:

/*
    Comentário com mais de 1 linha
    Mais uma linha
*/

Dessa maneira ele não cresce muito na largura :)

Abraços e bons estudos!

Fala, Lucas! Tudo bem contigo?

Está certíssimo!!!

Quando temos o tamanho do canvas começamos a ser mais preciso na área queremos trabalhar.

O seu raciocínio está perfeito

     2: Raciocinio >> 350 / 2 = 175. Pois o ...

É isso aí!

Continue assim!

Um abraço e bons estudos!