canvas自身不响应mouseenter/mouseleave事件，因其无内容触发进入/离开语义；需通过包裹div绑定事件或用mousemove+边界判断实现hover效果。
canvas 元素本身不响应 mouseenter/mouseleave
直接给 <canvas> 绑定 mouseenter 或 mouseleave 事件通常无效——因为 canvas 是空元素，没有子内容触发“进入/离开”语义，浏览器默认不派发这类事件（尤其在未设置 width/height 或 CSS 尺寸为 0 时）。更常见的是事件根本没触发，控制台也无报错，让人误以为代码写错了。
实操建议：
- 必须显式设置 canvas 的尺寸：用
width和height属性（不是 CSS），否则绘图坐标系会缩放，鼠标位置计算全乱 - 改用
mousemove+ 边界判断，或包裹一层<div>来承接事件 - 若用
addEventListener，确保监听的是 canvas DOM 节点本身，而非 document 或 body
用父容器 div 拦截鼠标事件最可靠
把 <canvas> 包在带明确宽高的 <div> 里，事件绑定到该 div 上，再通过 getBoundingClientRect() 算出鼠标相对 canvas 左上角的坐标。这样既避开 canvas 事件限制，又保持坐标精确。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div id="canvas-wrapper" style="width: 400px; height: 300px;"> <canvas id="my-canvas" width="400" height="300"></canvas> </div>
JS 部分：
const wrapper = document.getElementById('canvas-wrapper');
const canvas = document.getElementById('my-canvas');
const ctx = canvas.getContext('2d');
<p>wrapper.addEventListener('mouseenter', () => {
// 这里执行 hover 效果，比如画个高亮边框
ctx.strokeStyle = '#00aaff';
ctx.lineWidth = 3;
ctx.strokeRect(0, 0, canvas.width, canvas.height);
});</p><p>wrapper.addEventListener('mouseleave', () => {
// 清除效果，注意：clearRect 要覆盖整个 canvas，不能只清边框
ctx.clearRect(0, 0, canvas.width, canvas.height);
});如果坚持监听 canvas 自身，必须手动做 hit-test
canvas 不是普通 DOM 元素，它的“鼠标进入”本质是「鼠标坐标落在 canvas 像素区域内」。所以得靠 mousemove + event.clientX/clientY + getBoundingClientRect() 手动判断。
关键点：
- 每次
mousemove都要重新计算是否在 canvas 内，别忘了缓存rect避免重复调用 - 状态要用布尔变量记录（如
isHovering），避免反复触发 enter/leave 逻辑 - 别用
offsetX/offsetY—— 它们在 canvas 上行为不一致，Firefox 下可能为 0
简版逻辑：
let isHovering = false;
const rect = canvas.getBoundingClientRect();
<p>canvas.addEventListener('mousemove', (e) => {
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const inCanvas = x >= 0 && x <= canvas.width && y >= 0 && y <= canvas.height;</p><p>if (inCanvas && !isHovering) {
isHovering = true;
// 执行 enter 动作
} else if (!inCanvas && isHovering) {
isHovering = false;
// 执行 leave 动作
}
});hover 效果别直接 redraw 整个 canvas
很多新手一 hover 就 clearRect + 重绘全部内容，结果动画卡顿、闪烁。canvas 是位图，频繁全量重绘开销大，尤其内容复杂时。
更轻量的做法：
- 只绘制 hover 相关部分（比如加个描边、小图标、临时文字）
- 用双缓冲：准备一个离屏
<canvas>存原始画面，hover 时仅在主 canvas 上叠加层 - 如果只是颜色/透明度变化，优先改
ctx.globalAlpha或ctx.fillStyle，比重绘快得多
容易被忽略的是：canvas 的像素密度（devicePixelRatio）会影响鼠标坐标精度和绘制清晰度。真要上线，得做 DPR 适配，否则高清屏上 hover 区域偏移、线条模糊——这事不在事件逻辑里，但直接影响效果是否可用。
