coords坐标必须为偶数个整数且首尾不重复，按顺时针或逆时针顺序填写顶点；浏览器自动闭合多边形，ps量坐标需用原始尺寸截图；area不支持:hover，需canvas/div覆盖或用title提示；复杂交互应切换svg或leaflet。

直接用 <map></map> + @#@#@#@#@#@#@#@#@#@0 点选导出，比手算靠谱十倍 <h3>为什么鼠标移上去没 hover 效果？</h3> <p><code><area> 标签本身不支持 :hover 伪类，CSS 无法直接作用于它。

• 想实现悬停高亮，得额外加一层透明 <canvas></canvas> 或绝对定位的 <div> 覆盖对应区域，靠 JS 监听 <code>mousemove + 坐标判断来 toggle class
• 更轻量的做法：用 title 属性提供提示文本，至少保证基础可用性：<area shape="poly" coords="..." href="#" title="这是服务器机柜区域">
• 如果交互复杂度上升（比如要拖拽编辑、实时判断点是否在内），<map></map> 方案立刻触顶，该切 SVG 或 Leaflet 了

Canvas 自绘多边形热区更灵活吗？

是，但代价是失去语义化和 SEO 友好性，且需自己处理点击坐标换算。


Html2md
使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
下载
• 用 ctx.beginPath() + ctx.moveTo() + 多个 ctx.lineTo() + ctx.closePath() 绘制，再用 ctx.fill() 或 ctx.stroke()
• 监听 canvas 的 click 事件时，得把鼠标 clientX/clientY 换算成 canvas 坐标（考虑 getBoundingClientRect() 和缩放），再调用 isPointInPath() 判断是否击中
• 注意：Canvas 是位图，放大后边缘会糊；SVG 是矢量，天然响应式，更适合需要缩放、动画或多状态的热区

真正卡住人的从来不是“怎么画出那个形状”，而是坐标从哪来、变分辨率后怎么同步、点击逻辑要不要穿透到下层元素——这些细节没对齐，代码写得再漂亮也白搭。