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

Variáveis para centralizar o desenho.

Olá pessoal,

Fiz com base nas aulas de lógica, duas variáveis para mover X e Y ao centro depois que o desenho estava, pronto.

No final depois de tudo pronto... Agora só preciso mover para o centro. mas putz... vou ter que calcular o X e Y em todos os bloco outra vez... ai pensei nessa solução. Com base nessas variáveis foi possível colocar o desenho em qualquer lugar do Canvas alterando apenas 2 valores.

var centroX = 0

var centroY = 0

Essa solução é uma forma correta de lógica ?

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

<script>

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

pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);

// Ao final mover para o centro.
var centroX = 125;
var centroY = 50;

pincel.fillStyle = 'darkgreen';
pincel.fillRect(centroX + 0, centroY + 0, 350, 300); // 01 cabeça.

pincel.fillStyle = 'black';
pincel.fillRect(centroX + 50, centroY + 60, 90, 90); // 02 olhos
pincel.fillRect(centroX + 210, centroY + 60, 90, 90); // 03 olhos

pincel.fillRect(centroX + 140, centroY + 150, 70, 100); // 04 nariz

pincel.fillRect(centroX + 100, centroY + 190, 40, 110); // 05 boca
pincel.fillRect(centroX + 210, centroY + 190, 40,110); // 06 boca 

</script>
3 respostas

Oi Davilson tudo bem?

Sua forma de pensar está correta também. Foi uma grande sacada na minha opinião.

Continue assim e bons estudos!!!

solução!

Valew! André.

Disponha e bons estudos!!!