rect的coords是左上角(x1,y1)和右下角(x2,y2)坐标，非宽高；circle需cx,cy,r且r为正整数；poly为成对顶点序列；所有coords均基于图片naturalWidth/Height原始像素，不随CSS缩放自适应。
rect 的 coords 是左上 + 右下，不是宽高
当 shape="rect" 时，coords 必须是四个整数：x1,y1,x2,y2。其中 x1,y1 是矩形**左上角**像素坐标，x2,y2 是**右下角**像素坐标。图像左上角为原点 (0,0)，x 向右递增，y 向下递增。
常见错误包括：
- 误把
coords="10,20,90,70"理解为「从 (10,20) 开始，宽 90、高 70」——实际是右下角在 (90,70)，宽高其实是80×50 -
x1 >= x2或y1 >= y2：区域不可点击，浏览器静默忽略 - 混入空格：
"10, 20,90,70"中的空格会导致第二项被截断为"20"，后续全丢
circle 的 coords 必须是 cx,cy,r，r 不能为小数或零
shape="circle" 对应的 coords 格式固定为三个整数：cx,cy,r，分别表示圆心横纵坐标和**像素半径**。
关键限制：
立即学习“前端免费学习笔记（深入）”；
-
r必须是正整数，coords="100,80,5.5"或"100,80,0"会被浏览器丢弃，热点消失 - 坐标系仍以图片左上角为
(0,0)，不是相对于容器或视口 - 圆心可落在图片外，但只要半径覆盖图像内部分区域，该部分仍可点击
poly 的 coords 是顶点序列，必须成对且至少三组
shape="poly" 的 coords 是一串偶数个整数，按顺序两两组成顶点：x1,y1,x2,y2,x3,y3,...。浏览器自动将最后一顶点连回第一顶点闭合多边形。
典型陷阱：
- 写 5 个数（如
"10,20,30,40,50"）→ 解析为(10,20),(30,40),50，末尾单数被丢弃，只剩两点，不构成区域 - 顶点顺序混乱导致自相交，视觉上可能“看起来像”，但点击响应区域与预期不符
- 未校验原始图片尺寸：若图片是
600×400像素，但你在300×200渲染尺寸下量坐标，coords需除以缩放比（如 0.5），否则热点错位
coords 坐标永远基于 naturalWidth/naturalHeight，不是 CSS 渲染尺寸
coords 数值单位是像素，但参照系是图片**原始分辨率**（img.naturalWidth/img.naturalHeight），不是 offsetWidth 或 CSS 设置的 width/height。
这意味着：
- 用
width: 100%; height: auto响应式缩放图片时，coords不会自动缩放 → 热点漂移 - 高清屏（dpr > 1）下，若用设计稿坐标（如 @2x 图标标注的 200×100 区域），需手动除以
window.devicePixelRatio再填入coords - 动态重算唯一可靠方式：监听
img.onload和ResizeObserver，用natural尺寸与当前渲染尺寸比值，逐个映射坐标
真正难的不是写对格式，而是守住「坐标源 = 图片原始像素」这一条链；一旦中间环节（编辑器量图、CSS 缩放、JS 获取时机）偏离，就无声失效。
