实现Canvas鼠标移动事件事件参数为鼠标坐标所在的图形
要实现Canvas鼠标移动事件，可以使用Canvas的addEventListener方法来监听鼠标移动事件，然后在事件处理函数中获取鼠标坐标，并判断坐标是否在某个图形内。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Canvas鼠标移动事件示例</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 绘制一个矩形图形
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);
// 添加鼠标移动事件监听器
canvas.addEventListener('mousemove', handleMouseMove);
// 鼠标移动事件处理函数
function handleMouseMove(event) {
// 获取鼠标相对于canvas的坐标
const rect = canvas.getBoundingClientRect();
const mouseX = event.clientX - rect.left;
const mouseY = event.clientY - rect.top;
// 判断鼠标坐标是否在矩形内
if (mouseX >= 50 && mouseX <= 150 && mouseY >= 50 && mouseY <= 150) {
console.log('鼠标在矩形内');
}
}
</script>
</body>
</html>
在上述示例中，我们首先创建一个500x500的Canvas，并在其中绘制一个红色的矩形图形。然后使用addEventListener方法为Canvas添加mousemove事件的监听器，事件处理函数为handleMouseMove。
在handleMouseMove函数中，我们使用event.clientX和event.clientY获取鼠标相对于整个窗口的坐标，然后通过canvas.getBoundingClientRect()方法获取Canvas相对于窗口的坐标偏移，从而计算出鼠标相对于Canvas的坐标。
最后，我们判断鼠标坐标是否在矩形内，如果在矩形内，则输出提示信息。你可以根据需要在判断条件中执行具体的操作
原文地址: https://www.cveoy.top/t/topic/hNnZ 著作权归作者所有。请勿转载和采集!