area标签本身不支持置灰或直接点击交互，因其纯语义化、无视觉样式能力且不触发默认事件；需借助canvas覆盖、div叠加或svg等方案实现区域控制与视觉反馈。
area 标签本身不支持置灰或点击交互
直接用 <area> 无法实现“置灰”或“点击恢复”，因为它是纯语义化标签，没有视觉样式能力，也不触发默认事件（如 click 需要配合 <map></map> 和 JS 手动绑定）。浏览器只把它当作热点坐标定义，渲染完全依赖父级 <img> 的 usemap 关联。想控制局部灰度，必须借助其他手段叠加图层。
用 canvas 覆盖 + area 坐标还原实现区域控制
核心思路：把原图画到 <canvas></canvas> 上，用 <area> 的 coords 解析出多边形/矩形顶点，再用 canvas 2D API 对应区域做 globalCompositeOperation = 'destination-out' 或叠加半透灰层。点击时重绘该区域为原图像素。
-
coords值需按shape类型解析：rect是 x1,y1,x2,y2；circle是 cx,cy,r；poly是 x1,y1,x2,y2,... 偶数个数字 - canvas 绘制前务必设置
canvas.width/canvas.height与图片实际尺寸一致，否则坐标错位 - 灰度建议用
ctx.fillStyle = 'rgba(0,0,0,0.6)'填充路径，比滤镜更可控、兼容性更好
area 点击失效？检查 map name 与 usemap 值是否严格匹配
常见错误是 <map name="mymap"></map> 和 <img usemap="#othermap"> 不一致，或漏掉 # 符号。注意：name 值区分大小写，且不能含空格或特殊字符。
- Chrome DevTools 中 Elements 面板里右键
<area>→ “Break on” → “attribute modifications” 可快速定位绑定失败原因 - 若用 JS 动态插入
<map></map>，需确保在<img>加载完成后操作，否则部分浏览器忽略映射 - 移动端 Safari 对
<area>点击热区有最小尺寸限制（约 44×44px），太小会失灵
更简单可靠的替代方案：用 div + background-image 模拟
如果不需要严格遵循图像映射规范，直接放弃 <area>，改用绝对定位的 <div> 覆盖在图片上，通过 CSS <code>filter: grayscale(100%) 和 :hover 或 JS onclick 切换 grayscale(0%) 更稳定。
- 坐标计算仍可复用原有
coords数据，转成left/top/width/height即可 - 对
poly区域，用clip-path: polygon(...)实现非矩形遮罩，但注意 IE 不支持 - 需要键盘可访问性时，给覆盖
<div> 加 <code>tabindex="0"和role="button"真正难的不是画灰，而是保持坐标与图片缩放、响应式布局同步——一旦图片用max-width: 100%，所有基于原始像素的coords都会偏移，必须监听resize并按比例重算。
