coords属性需将坐标数组转为无空格、逗号分隔的字符串，且顺序格式须严格匹配shape：rect为x1,y1,x2,y2（4值），circle为cx,cy,r（3值），poly为顺时针/逆时针顶点序列（至少6值，首尾不重复）。
HTML中<area>的coords属性怎么填坐标数组
直接把坐标数组转成逗号分隔的字符串就行，但顺序和格式必须严格匹配形状类型（rect、circle、poly）。浏览器不会解析数组，只认coords里那一串数字字符串。
常见错误是把[x1,y1,x2,y2]原样塞进coords，结果区域不响应点击——因为没转成字符串，或少了引号，或顺序错乱。
-
rect：必须4个值，顺序是x1,y1,x2,y2（左上→右下），不能颠倒 -
circle：必须3个值，cx,cy,r，半径不能为0或负数 -
poly：至少6个值（即3个点），按顺时针/逆时针闭合路径列，首尾不必重复
JavaScript里怎么安全生成coords字符串
别用arr.join(',')硬拼，要先校验长度和数值合法性。比如poly坐标少于6个会静默失效，circle半径为NaN或Infinity也会被忽略。
推荐封装一个校验函数：
立即学习“前端免费学习笔记（深入）”；
function coordsString(shape, points) {
if (!Array.isArray(points)) return '';
const nums = points.map(Number).filter(n => !isNaN(n) && isFinite(n));
if (shape === 'rect' && nums.length !== 4) return '';
if (shape === 'circle' && nums.length !== 3) return '';
if (shape === 'poly' && nums.length < 6) return '';
return nums.join(',');
}
用法：<area shape="poly" coords="{coordsString('poly', myPoints)}">
为什么用<map></map>+<area>比CSS定位更可靠
纯CSS靠position模拟热点区域，缩放、滚动、高DPI屏下容易偏移；而<area>坐标是相对于<img alt="HTML怎么把坐标数组转为映射区域" >原始尺寸的绝对像素值，只要图片没用object-fit拉伸变形，点击热区就始终精准。
注意两个关键前提：
-
<img alt="HTML怎么把坐标数组转为映射区域" >必须带usemap属性，且值要和<map></map>的name完全一致（大小写敏感） - 如果图片是响应式（比如
max-width: 100%），得用image-rendering: -webkit-optimize-contrast防缩放模糊，否则边缘点击可能失灵
调试<area>不生效的三步检查
90%的问题出在这三处，挨个确认比重写代码快得多：
- 浏览器开发者工具里看
<area>元素是否被渲染出来（不是display: none，也没被<map></map>外的其他标签包裹） - 控制台查有没有
Failed to execute 'addColorStop' on 'CanvasGradient'这类无关报错——它会阻断后续脚本，导致coords没正确插入 - 临时给
<area>加style="outline: 2px solid red"（部分浏览器支持），看轮廓是否出现在预期位置
坐标本身没问题，但<map></map>没绑定到图片，或者图片src加载失败，都会让整个热区彻底沉默——这点最容易被忽略。
