canvas悬停需手动实现：先通过getboundingclientrect转换坐标并检测图形命中，再解耦状态更新与重绘，用requestanimationframe驱动平滑动画，结合插值缩放和shadowblur发光增强反馈，mouseenter/mouseleave仅适用于全局交互。

Canvas 本身不识别“悬停”概念，所有鼠标悬停反馈都得靠手动实现：监听坐标、判断是否在图形上、再驱动状态变化和重绘。关键不在“加个事件”，而在“坐标映射 + 状态管理 + 平滑重绘”三者配合。

坐标转换与命中检测是前提

Canvas 没有内置的元素级事件，必须把屏幕坐标转成 Canvas 坐标，再逐个判断是否落在目标图形内。

• 用 getBoundingClientRect() 获取 canvas 在页面中的位置，再用 clientX/clientY 减去 left/top 得到画布内坐标
• 对圆形：计算鼠标点到圆心距离，小于半径即命中；对矩形：检查 x、y 是否同时落在 left/right 和 top/bottom 范围内
• 建议把每个可交互图形抽象为对象，自带 contains(x, y) 方法，便于后续扩展

状态更新要和重绘解耦

不能在 mousemove 里直接 draw，否则帧率暴跌。所有交互逻辑只负责更新状态变量（比如 isHovered、targetScale、hoverColor），真正绘制交给独立的动画循环。

Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）

用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。

下载

• 用 requestAnimationFrame 驱动每帧重绘，保证稳定 60fps
• 在动画函数中，根据当前状态决定缩放比例、阴影强度、颜色等参数，再调用 clearRect + 绘制逻辑
• 避免重复创建路径或对象，复用已有图形数据（如路径用 beginPath + moveTo + lineTo 定义一次，每帧重用）

缩放与发光需动态控制

视觉反馈的核心是变化感，但突变会显得生硬，需要缓动+叠加效果。

• 缩放不用 if-else 切换，改用插值：currentScale += (targetScale - currentScale) * 0.1，让数值平滑趋近目标
• 发光靠 shadowBlur 和 shadowColor，悬停时设为 20 + rgba(100,180,255,0.8)，离开时还原为小值（如 4）并清空 shadowColor
• 注意 shadow 属性会影响后续所有绘制，绘制完发光图形后，及时重置 ctx.shadowBlur = 0

mouseenter/mouseleave 可简化边界处理

如果只需整体区域反馈（比如整个 canvas 悬停时统一变色），可用原生事件代替逐点检测。

• 监听 canvas.addEventListener('mouseenter', () => isHovering = true) 和 mouseleave 切换状态
• 适合做背景光效、全局提示层、放大镜入口等非精确图形交互
• 但无法区分 canvas 内多个图形，精细交互仍需 mousemove + 命中检测