当前位置：首页 > article >正文

Canvas进阶篇：鼠标交互动画

article 2025/9/14 20:39:38

Canvas进阶篇：鼠标交互动画

前言
获取鼠标坐标
鼠标事件
- 点击事件监听
- - 代码示例
  - 效果预览
- 拖动事件监听
- - 代码示例
  - 效果预览
结语

前言

在上一篇文章Canvas进阶篇：基本动画详解中，我们讲述了在Canvas中实现动画的基本步骤和动画的绘制方法。本文将进一步讲述如何通过鼠标事件增加动画和用户的交互，包括捕获鼠标的点击和拖动事件，获取鼠标在 Canvas 中坐标等。

获取鼠标坐标

在进行鼠标交互时，最主要的是要获取鼠标在Canvas中画布中的坐标。通常我们获取到的鼠标坐标都是相对于浏览器窗口的；如果想要获取相对于 Canvas 画布的坐标，就需要进行坐标转换，可以通过以下方式实现：

function getCanvasCoordinates(event) {const rect = canvas.getBoundingClientRect();const x = event.clientX - rect.left;const y = event.clientY - rect.top;return { x, y };
}

上述代码中，canvas.getBoundingClientRect()方法返回 Canvas 在浏览器窗口中的位置和尺寸信息，通过用鼠标相对于窗口的坐标减去 Canvas 左上角相对于窗口的坐标，就得到了鼠标在 Canvas 中的坐标。

鼠标事件

鼠标事件一共分为4类：鼠标点击事件click、鼠标按下事件mousedown、鼠标移动事件mousemove和鼠标松开事件mouseup。

点击事件监听

利用点击事件，我们可以在鼠标点击的位置绘制各种图形，比如圆形等，示例代码如下：

代码示例

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠标点击画圆</title><style>#canvas {border: 1px solid #000;}</style></head><body><canvas id="canvas" width="600" height="600"></canvas><script>const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');function getCanvasCoordinates(event) {const rect = canvas.getBoundingClientRect();const x = event.clientX - rect.left;const y = event.clientY - rect.top;return { x, y };}function handleClick(event) {const {x,y} = getCanvasCoordinates(event);ctx.beginPath();ctx.arc(x, y, 20, 0, 2 * Math.PI);ctx.fillStyle = 'red';ctx.fill();}// 绑定鼠标点击事件canvas.addEventListener('click', handleClick);</script></body>
</html>

效果预览

鼠标点击画圆

拖动事件监听

实现拖动元素的功能，需要结合mousedown、mousemove和mouseup三个事件，我们以拖动一个矩形为例：

代码示例

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠标拖动矩形</title><style>#canvas {border: 1px solid #000;}</style></head><body><canvas id="canvas" width="600" height="600"></canvas><script>const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');function getCanvasCoordinates(event) {const rect = canvas.getBoundingClientRect();const x = event.clientX - rect.left;const y = event.clientY - rect.top;return {x,y};}// 矩形数组let rectangles = [];// 拖拽状态let isDragging = false;let startX, startY;let offsetX, offsetY;let draggedRect = null;function handleMouseDown(event) {const {x,y} = getCanvasCoordinates(event);for (const rect of rectangles) {if (x >= rect.x && x <= rect.x + rect.width && y >= rect.y && y <= rect.y + rect.height) {isDragging = true;draggedRect = rect;startX = x;startY = y;offsetX = x - rect.x;offsetY = y - rect.y;break;}}}function handleMouseMove(event) {if (isDragging) {const {x,y} = getCanvasCoordinates(event);if (draggedRect) {draggedRect.x = x - offsetX;draggedRect.y = y - offsetY;drawCanvas();}}}function handleMouseUp() {isDragging = false;draggedRect = null;}function drawCanvas() {ctx.clearRect(0, 0, canvas.width, canvas.height);for (const rect of rectangles) {ctx.beginPath();ctx.rect(rect.x, rect.y, rect.width, rect.height);ctx.fillStyle = 'blue';ctx.fill();}}// 绘制矩形function addRectangle() {const rect = {x: Math.random() * (canvas.width - 100),y: Math.random() * (canvas.height - 100),width: 80 + Math.random() * 40,height: 60 + Math.random() * 40,color: `hsl(${Math.random() * 360}, 70%, 60%)`};rectangles.push(rect);drawCanvas();}// 绑定鼠标按下事件，用于拖动起始canvas.addEventListener('mousedown', handleMouseDown);// 绑定鼠标移动事件，用于拖动过程canvas.addEventListener('mousemove', handleMouseMove);// 绑定鼠标松开事件，用于拖动结束canvas.addEventListener('mouseup', handleMouseUp);addRectangle();</script></body>
</html>

效果预览

鼠标拖动矩形

结语

本文主要介绍了在 Canvas 中处理鼠标点击和拖动事件的方法，对于文章中错误的地方或者有任何问题，欢迎在评论区留言分享！

Canvas进阶篇：鼠标交互动画

前言

获取鼠标坐标

鼠标事件

点击事件监听

代码示例

效果预览

拖动事件监听

代码示例

效果预览

结语

相关文章：