Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Fala, Jairo!!! Tudo bom contigo?
Vou pedir para colocar o código para darmos uma olhada!
Apesar de que, se você tem copiado e não tem rodado, vou pedir para ir até onde o arquivo está salvo e, com o botão direito, abra esse arquivo no navegador!
Muitas vezes nós salvamos o código em um arquivo e acabamos dando "refresh" em outro. Dê uma olhada!!!
Fico no aguardo do seu retorno!
<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;
var raio = 10;
if (evento.shiftKey) {
raio = raio + 20;
}
console.log(x + ',' + y);
pincel.fillStyle = 'blue';
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * 3.14);
pincel.fill();
}
tela.onclick = desenhaCirculo;
</script>Fala, Jairo!!!
O código está perfeito!
Rodando normalmente.
Eu abri e até rodei na minha máquina para desencardo de consciência!
Verifique o arquivo em que está rodando! Pode ser isso!
Me dê um retorno! ;-)
Oi Cássio.
Então, tem coisa do além aqui no meu computador então, por apareceu outro bug que não compreendo. Veja o seguinte:
function dispara(evento){
//copiado do Flávio
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
//digitado por Jairo
var x = evento.pageX - tela.offsetLeft;
var y = evento.pagey - tela.offsetTop;
if ((x > xAleatorio - raio)
&& (x < xAleatorio + raio)
&& (y > yAleatorio - raio)
&& (y < yAleatorio + raio)){
alert('acertou');
}Se eu deixo rodando o copiado do Flávio, funciona. Se eu deixo rodando o digitado por Jairo, não funciona? que bruxaria é essa?
Opa, Jairo!!! ahahah... não é bruxaria não!!!
Veja que no seu, o pageyteria que ser pageY
Veja se roda agora!!! ;-)