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

[Dúvida] Bug das bolinhas

Gente, na aula de fazer as bolinhas com o clique do mouse, eu fui fazendo junto com o professor, mas na hora de fazer rodar, aparecia as coordenadas do clique mas não apareceu as bolinhas azul. Fui testar com o código do professor , girei o programa e apareceu as bolinhas azul. Eu fiquei sem entender pq o meu código não foi, não consegui encontrar nenhum erro. Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas
solução!

Olá Josefa, tudo bem com você?

Gostaria de agradecer pela paciência em obter um retorno!

Sobre o seu código eu testei o seu e o do professor, e de fato o seu aparece as coordenadas, mas não aparece os círculos, e o que gerou isso foi apenas uma virgula, no seguinte trecho:

pincel.arc(x, y, 10, 0, 2*3,14);

Na parte “23,14”, você usou uma vírgula, mas você deveria ter usado um ponto dessa forma:

pincel.arc(x, y, 10, 0, 2*3.14);

Com isso seu projeto irá funcionar perfeitamente, deixarei o código abaixo para que você teste em seu PC.

<script>

<canvas width="700" height="500"></canvas>

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

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

function exibeAlerta(evento) {

 var x = evento.pageX - tela.offsetLeft;
 var y = evento.pageY - tela.offsetTop;

 pincel.fillStyle="blue";
 pincel.beginPath();
 pincel.arc(x, y, 10, 0, 2*3.14);
 pincel.fill();
 console.log(x + ", " + y);

}

tela.onclick = exibeAlerta;

</script>

No geral foi isso, espero ter ajudado, tento tomar cuidado na questão do uso de virgula(,), ponto(.), e ponto e vírgula(;).

Continue se dedicando e praticando com seus conhecimentos, pois assim você irá muito mais longe!

Um enorme abraço e bons estudos.

Caso este post tenha lhe ajudado, por favor, marcar como solução! ✓.

Muito obrigada!!! Tenho que ficar mais atenta nessas pontuações.