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.
2
respostas
respostas
[Dúvida] Bug das bolinhas
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.