<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);
function desenhaCirculo(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 = desenhaCirculo;
</script>
6
respostas
respostas
As bolas azuis não aparecem no meu código!
LEVY GIMENES DA SILVA, testei seu código no meu navegador e na primeira vez de fato, não rodou, mas ai diminui alguns espaços entre console.log e as variáveis e deu certo, enfim acredito que muito espaçamento entre uma linha e outra dentro da função acaba comprometendo o entendimento da maquina X browser, por menor que seja. então vai a dica, esta tudo bem identado, porém notei alguns espaços a mais do que o necessário.
No meu caso as bolinhas não estão aparecendo qdo clico.
Soraia Conceição Barbosa, copiei seu codigo novamente e deu certo no meu navegador, qual navegador voce esta utilizando? Chrome?
Oi Emerso, uso o Sublime para escrever, ele carrega o programa no Edge.
- baixe o Google Chrome no link acima;
- crie uma pasta com o nome "lógica" na sua area de tabalho;
- va ao sublime clique em ( File - New file ) após isso, use o atalho Ctrl + S e nomeie o arquivo que acabou de criar no sublime;
- cole seu codigo no arquivo que acabou de criar no sublime;
- abra o Google Chrome e use o atalho Ctrl + O e será automaticamente redirecionada a pasta "lógica" na sua area de trabalho (caso nao seja, basta procurar nas pastas ao lado esquerdo nas suas pastas onde ela esta que sera na area de trabalho;
- clique no arquivo que acabou de criar pelo sublime e abra ele no navegador e vera que por este navegador seu codigo vai rodar normal.
Caso te for util as informações que te passei, e funcionar, peço que marque minhas respostas como solução pra que eu consiga ajudar mais pessoas. Não se esqueça de me dar um feedback! :)
Funcionou, Emerson!!!! Muuuuuito obrigada, mesmo! :) Só não consigo marcar como solução pois não fui eu quem iniciou o tópico. Valeu!