<br><br>
<center><canvas width="600" height="400"></canvas></center>
<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);
}
//Opções de interação com o mouse
tela.onmousemove = desenhaCirculo;
</script>Achei interessante colocar mais algumas opções de mouse sobre a aula "programa3.html" de Lógica de Programação II.
onclick = O evento ocorre quando o usuário clica em um elemento
oncontextmenu = O evento ocorre quando o usuário clica com o direito em um elemento para abrir um menu de contexto
ondblclick = O evento ocorre quando o usuário clica duas vezes em um elemento
onmousedown = O evento ocorre quando o usuário pressiona um botão do mouse sobre um elemento
onmouseenter = O evento ocorre quando o ponteiro é movido para um elemento
onmouseleave = O evento ocorre quando o ponteiro é movido para fora de um elemento
onmousemove = O evento ocorre quando o ponteiro se move enquanto está sobre um elemento
onmouseover = O evento ocorre quando o ponteiro é movido para um elemento, ou em um de seus filhos
onmouseout = O evento ocorre quando o usuário move o ponteiro do mouse para fora de um elemento, ou fora de um de seus filhos
onmouseup = O evento ocorre quando o usuário solta o botão do mouse sobre um elemento
