Capturando eventos do mouse e teclado
Vamos explorar a captura de eventos do mouse e do teclado no HTML Canvas, permitindo interações ricas e dinâmicas com os usuários.
1. Eventos do Mouse:
Os eventos do mouse, como click, mousemove, e mousedown, oferecem maneiras poderosas de interagir com o Canvas. Ao capturar esses eventos, podemos criar experiências interativas, como cliques e movimentos do cursor.
Exemplo de Captura de Clique do Mouse
canvas.addEventListener('click', function(evento) {
var mouseX = evento.clientX - canvas.getBoundingClientRect().left;
var mouseY = evento.clientY - canvas.getBoundingClientRect().top;
// Código de resposta ao clique
console.log('Clique em (' + mouseX + ', ' + mouseY + ')');
});
2. Eventos do Teclado:
Os eventos do teclado, como keydown e keyup, permitem que você responda a pressionamentos de teclas. Isso é útil para criar jogos, formulários interativos e outras aplicações que requerem entrada do teclado.
Exemplo de Captura de Pressionamento de Tecla
window.addEventListener('keydown', function(evento) {
// Código de resposta ao pressionamento de tecla
console.log('Tecla pressionada: ' + evento.key);
});
3. Coordenadas do Evento:
Ao capturar eventos do mouse, é crucial converter as coordenadas do evento para as coordenadas do Canvas. Isso garante que suas interações estejam alinhadas corretamente com os elementos visuais no Canvas.
Exemplo de Conversão de Coordenadas
canvas.addEventListener('mousemove', function(evento) {
var mouseX = evento.clientX - canvas.getBoundingClientRect().left;
var mouseY = evento.clientY - canvas.getBoundingClientRect().top;
// Código de resposta ao movimento do mouse
console.log('Mouse em (' + mouseX + ', ' + mouseY + ')');
});
Aqui está um exemplo completo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de Interação no Canvas</title>
<style>
canvas {
border: 1px solid #000;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<canvas id="meuCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById("meuCanvas");
var contexto = canvas.getContext("2d");
var circulo = { x: 50, y: 100, raio: 20, velocidade: 4 };
function desenharCirculo() {
contexto.clearRect(0, 0, canvas.width, canvas.height);
contexto.beginPath();
contexto.arc(circulo.x, circulo.y, circulo.raio, 0, 2 * Math.PI);
contexto.fill();
}
canvas.addEventListener('mousemove', function(evento) {
circulo.x = evento.clientX - canvas.getBoundingClientRect().left;
circulo.y = evento.clientY - canvas.getBoundingClientRect().top;
desenharCirculo();
});
window.addEventListener('keydown', function(evento) {
if (evento.key === 'a') {
circulo.x -= circulo.velocidade;
} else if (evento.key === 'd') {
circulo.x += circulo.velocidade;
}
desenharCirculo();
});
desenharCirculo();
</script>
</body>
</html>
Visualização do código
Ao compreender a captura de eventos do mouse e do teclado, você poderá criar experiências mais envolventes e interativas no HTML Canvas.
Nos próximos tópicos, abordaremos a criação de interações específicas com o usuário e a manipulação de objetos em resposta a eventos.
Continue praticando e experimentando para aprimorar suas habilidades de interatividade no Canvas.
