Criando interações com o usuário
Vamos explorar como criar interações mais avançadas com o usuário no HTML Canvas. Essas interações vão além da simples movimentação de elementos, proporcionando experiências envolventes e dinâmicas.
1. Eventos de Toque (Touch Events)
Para dispositivos móveis, a captura de eventos de toque é essencial. O Canvas suporta eventos como touchstart, touchmove, e touchend, que podem ser usados para criar interações intuitivas em telas sensíveis ao toque.
Exemplo de Captura de Evento de Toque
canvas.addEventListener('touchmove', function(evento) {
var toque = evento.touches[0];
circulo.x = toque.clientX - canvas.getBoundingClientRect().left;
circulo.y = toque.clientY - canvas.getBoundingClientRect().top;
desenharCirculo();
});
2. Arrastar e Soltar (Drag and Drop)
Implementar a capacidade de arrastar e soltar elementos no Canvas oferece uma experiência interativa mais sofisticada. Você pode capturar eventos de mouse para rastrear o início e o término do arrasto.
Exemplo de Arrastar e Soltar
var arrastando = false;
canvas.addEventListener('mousedown', function(evento) {
if (distanciaPontoCirculo(evento.clientX, evento.clientY, circulo) <= circulo.raio) {
arrastando = true;
}
});
canvas.addEventListener('mousemove', function(evento) {
if (arrastando) {
circulo.x = evento.clientX - canvas.getBoundingClientRect().left;
circulo.y = evento.clientY - canvas.getBoundingClientRect().top;
desenharCirculo();
}
});
canvas.addEventListener('mouseup', function() {
arrastando = false;
});
3. Feedback Visual (Visual Feedback)
Forneça feedback visual durante as interações do usuário. Isso pode incluir alterações de cor, tamanho ou estilo para indicar que um elemento está sendo interagido.
Exemplo de Feedback Visual
canvas.addEventListener('mouseover', function() {
// Alterar a cor do círculo ao passar o mouse sobre ele
circulo.cor = 'orange';
desenharCirculo();
});
canvas.addEventListener('mouseout', function() {
// Retornar à cor original ao retirar o mouse
circulo.cor = 'blue';
desenharCirculo();
});
Veja agora 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 Avançada 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, cor: 'blue' };
var arrastando = false;
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.fillStyle = circulo.cor;
contexto.fill();
}
function distanciaPontoCirculo(x, y, circulo) {
var dx = x - circulo.x;
var dy = y - circulo.y;
return Math.sqrt(dx * dx + dy * dy);
}
canvas.addEventListener('mousedown', function(evento) {
if (distanciaPontoCirculo(evento.clientX, evento.clientY, circulo) <= circulo.raio) {
arrastando = true;
}
});
canvas.addEventListener('mousemove', function(evento) {
if (arrastando) {
circulo.x = evento.clientX - canvas.getBoundingClientRect().left;
circulo.y = evento.clientY - canvas.getBoundingClientRect().top;
desenharCirculo();
}
});
canvas.addEventListener('mouseup', function() {
arrastando = false;
});
canvas.addEventListener('mouseover', function() {
// Alterar a cor do círculo ao passar o mouse sobre ele
circulo.cor = 'orange';
desenharCirculo();
});
canvas.addEventListener('mouseout', function() {
// Retornar à cor original ao retirar o mouse
circulo.cor = 'blue';
desenharCirculo();
});
desenharCirculo();
</script>
</body>
</html>
Visualização do código
Experimente combinar diferentes tipos de interações para criar experiências ricas e envolventes.
Continue praticando e ajustando conforme necessário para atender aos requisitos específicos do seu projeto.
