原生+在动态场景下失效，因其坐标基于图片原始像素且不随css缩放、srcset或布局变化重算；canvas方案通过实时坐标转换、几何命中检测和dpr适配实现精准响应式热区。
为什么<map></map>配<area>在动态场景下会失效
原生图像映射只认图片原始像素尺寸，coords写死之后，一旦图片被CSS缩放、srcset切换分辨率、或容器流式布局导致尺寸变化，热区就立刻偏移——浏览器不报错，但点击全落空。它本质是静态声明，没有坐标重算机制，也不支持拖拽编辑、hover反馈、多边形实时判定等交互需求。
常见卡点包括：
– usemap="#floorplan" 和 <map name="floorplan"></map> 大小写/短横线不一致
– coords 值超出原始图宽高（比如图是 800×600，却写了 "0,0,900,700"）
– 图片用 background-image 替代 <img>，<map></map> 完全不生效
Canvas绘制热区的核心逻辑链
Canvas不依赖图片标签，而是把整张图作为纹理载入，所有热区坐标都基于当前画布的ctx坐标系实时计算。这意味着：缩放时你只需重绘一次，坐标自动对齐；拖拽热区时直接改数据对象，再调用draw()即可；判断点击是否命中，用的是几何算法（如点在多边形内），不是靠浏览器内置的<area>命中检测。
关键步骤：
– 用 new Image() 加载图片，onload 后调用 ctx.drawImage() 渲染到固定尺寸的 <canvas></canvas>
– 所有热区定义为数组，每项含 type（"rect"/"circle"/"poly"）、coords（相对 canvas 的像素值）、href 或 onClick 回调
– 鼠标事件监听绑定在 <canvas></canvas> 上，通过 getBoundingClientRect() 把屏幕坐标转为 canvas 坐标，再喂给命中检测函数
响应式热区坐标的 Canvas 校准要点
Canvas本身不响应 CSS 缩放，所以不能只靠 width/height 属性撑满容器。必须手动处理设备像素比（DPR）和容器尺寸变化：
– 在 resize 事件里，先读取容器 clientWidth/clientHeight，再乘以 window.devicePixelRatio 设置 canvas 的 width/height 属性
– 调用 ctx.scale(dpr, dpr) 补偿高分屏模糊
– 所有热区坐标仍按逻辑尺寸（如 800×600）存储，绘制前统一乘以缩放比：renderX = logicalX * (canvas.width / logicalWidth)
– 点击坐标转换时，反向除以该缩放比，才能匹配原始热区定义
别跳过 hitTest 函数的实现细节
Canvas没内置“哪个<area>被点了”的能力，你得自己写命中检测。矩形和圆形简单，但多边形容易踩坑：
– rect：用 x >= left && x = top && y <br>– <code>circle：用 Math.hypot(x - cx, y - cy) <br>– <code>poly：推荐用 ray-casting 算法（如 point-in-polygon 库），**不要**用 ctx.isPointInPath() —— 它只对最后一次 beginPath() 有效，且无法跨热区复用路径缓存
– 所有检测必须在 canvas 坐标系下运行，不是 DOM 坐标系，也不是图片原始像素系
实际项目中，最难的不是画出热区，而是让同一套坐标数据在 PC、iPad、折叠屏手机上都点得准——这要求你把“原始图尺寸→逻辑画布尺寸→物理 canvas 像素→DPR 补偿→事件坐标反推”这条链路上每个环节的换算关系写死在代码里，而不是靠 guess 或调试时临时调整。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
