Canvas API: Desenhando com o Mouse em JavaScript
Anteriormente, discutimos principalmente gráficos estáticos no canvas. No entanto, também podemos criar formas dinamicamente, desenhando com o ponteiro do mouse.
Para isso, vamos definir a seguinte página:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Programício</title>
</head>
<body>
<canvas id="canvas" width="400" height="250" style="background-color: #eee; border: 1px solid #ccc; margin: 10px"></canvas>
<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const w = canvas.width;
const h = canvas.height;
const mouse = { x: 0, y: 0 }; // coordenadas do mouse
let draw = false;
// Evento de pressionar o mouse
canvas.addEventListener("mousedown", function (e) {
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
draw = true;
context.beginPath();
context.moveTo(mouse.x, mouse.y);
});
// Evento de mover o mouse
canvas.addEventListener("mousemove", function (e) {
if (draw) {
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
context.lineTo(mouse.x, mouse.y);
context.stroke();
}
});
// Evento de soltar o mouse
canvas.addEventListener("mouseup", function (e) {
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
context.lineTo(mouse.x, mouse.y);
context.stroke();
context.closePath();
draw = false;
});
</script>
</body>
</html>Para processar o movimento do mouse no elemento canvas, foram definidos três manipuladores de eventos: para pressionar, mover e soltar o mouse. Quando o mouse é pressionado, a variável draw é definida como true, iniciando o desenho. Além disso, ao pressionar, fixamos o ponto inicial de onde o desenho começará.
Ao mover o mouse, obtemos a nova posição do ponteiro e desenhamos uma linha até ela. Quando o ponteiro é solto, fechamos o caminho gráfico com o método context.closePath() e redefinimos a variável draw para false.
