Entrar Ainda não tem acesso?
3
respostas

Erro de lógica. Posicionamento fillReact();

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Desenhando gráficos com Canvas e atividade A cara do Creeper

por Juliana Bezerra
| 95.7k xp | 31 posts

Olá, equipe Alura. Meu desejo era de montar um quadrado de 600 de largura e 600 de altura. Fazer os olhos terem um espaçamento entre eles de 200 e os mesmos serem 100 x 100. Porém quando vou aplicar isso na prática os olhos acabam ficando em posições não desejaveis e fogem do que escopo pedido no meu código. Parece que a resposta do browser é outra ao que eu solicitei. O segundo olho fica encostado no final do rosto. OU SERÁ QUE EU NÃO ENTENDI NADA? Segue o código : O canvas esta sem <> pq não da pra por no comentário se não ele constroi o elemento.

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

var rosto = document.querySelector("canvas");

var pincel = rosto.getContext("2d");

pincel.fillStyle = "green";

pincel.fillRect(0, 0, 600, 600);

pincel.fillStyle = "black";

pincel.fillRect(100, 100, 200, 200);

pincel.fillRect(400, 100, 500, 200);
3 respostas
por Diego Rodrigues Cravo Teixeira
| 168k xp | 361 posts

Olá, acho que você está se confundindo na linha de código pincel.fillRect (x, y, a, b), onde:

x = posição inicial em x

y = posição inical em y

a = tamanho do eixo x

b = tamanho do eixo y

No caso para os olhos terem 100x100 o código deve ser: 

pincel.fillRect(100, 100, 100, 100);

pincel.fillRect(400, 100, 100, 100);
por Juliana Bezerra
| 95.7k xp | 31 posts

Olá Diego! Como vai? Então antes de eu enviar a pergunta fiz esse teste porém pra mim não faz muito sentido. Vamos lá neste código : pincel.fillRect(100, 100, 100, 100); Vc está iniciando e terminando a posição x e y no mesmo lugar. Está iniciando a altura e a largura na mesma posição sendo que na verdade eu queria que ela iniciasse na posição 100 e terminasse na 200, ou seja teria uma largura de 100. Aplicando assim a mesma lógica para a altura. Pq Eu apontando o inicio e o fim na mesma posição da certo?

por Diego Rodrigues Cravo Teixeira
| 168k xp | 361 posts

Olá Juliana, Acho que você está se confundindo. Os dois primeiros valores de fillRect servem para você apontar a posição inicial de x é y, mas os dois últimos valores não são para você apontar a posicao final de x e y (Acho que é aqui que você está se confundindo), mas sim o tamanho do retângulo que deseja preencher. No caso de 

pincel.fillRect(100, 100, 100, 100);

Os dois primeiros valores são para a posição x = 100 e y = 100, enquanto os outros dois valores são para tamanho do retângulo no eixo x = 100 é tamanho do retângulo no eixo y = 100. Testando essa linha de código você vai ver que irá funcionar.