Programa pronto, só uma observação, quando aciono para visualizar o console ele não funciona.
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!
Programa pronto, só uma observação, quando aciono para visualizar o console ele não funciona.
<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);
var desenha = false;
function desenhaCirculo(evento) {
if(desenha) {
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);
}
}
// O evento do JavaScript que permite capturar o movimento do mouse, e logo sua coordenada
tela.onmousemove = desenhaCirculo; // sem desenhar,só printando o círculo, tela.onclick = desenhaCirculo
function habilitaDesenhar() {
desenha = true;
}
function desabilitaDesenhar() {
desenha = false;
}
// Existem os eventos, onmousedown e onmouseup. O primeiro é disparado toda vez que o botão esquerdo do mouse é pressionado e o segundo quando ele é solto.
tela.onmousedown = habilitaDesenhar; // ou tela.onmousedown = true;
tela.onmouseup = desabilitaDesenhar; // ou tela.onmousedown = false;
// Se eu clico com o botão esquerdo do mouse, aparece o menu e mesmo depois dele sair, posso continuar a desenhar.
// Se eu clico com o botão direito do mouse, posso começar a desenhar.
</script>
Evaldo, coloque se código dentro do "inserir bloco de códigos" no menu superior para que possamos visualizar e ajudar você...