HTML利用area标签和canvas绘制热区的对比-html教程-PHP中文网

area热区不能缩放是因为coords是绑定图片原始尺寸（naturalwidth/height）的硬编码像素值，与css渲染尺寸完全脱钩，浏览器不自动重算——非bug，是w3c规范行为。

html利用area标签和canvas绘制热区的对比

area 标签热区为什么不能缩放

因为 area 的 coords 是硬编码像素值，绑定的是图片原始尺寸（img.naturalWidth/img.naturalHeight），和 CSS 渲染宽高完全脱钩。哪怕你用 width: 100% 或 max-width: 100vw 缩放图片，浏览器也**不会重算**这些坐标——它只按原始图尺寸画热区，结果就是点不中、高亮飘走。

常见错误现象：

桌面正常，移动端点击失效（图缩到 375px 宽，但 coords="0,0,100,100" 还是按 1200×800 原图算，实际只占约 31×21px）
开发者工具里悬停 area，高亮框明显偏离目标区域
加了 transform: scale(0.8) 后热区彻底消失——area 不响应任何 CSS 变形

这不是 bug，是规范行为。W3C 明确要求 area 坐标基于原始图像，所以别指望靠 CSS 修复。

canvas 绘制热区怎么判断鼠标是否在内

canvas 本身不提供“热区”语义，你要自己实现点在多边形内的判断逻辑，核心是 isPointInPath() + 路径重绘。关键不是“怎么画”，而是“怎么建路径+怎么查”。

实操要点：

每次鼠标移动前，必须用 ctx.beginPath() + ctx.moveTo()/ctx.lineTo() 重新绘制目标区域路径（不能复用旧路径）
调用 ctx.isPointInPath(x, y) 前，x/y 必须是相对于 canvas 元素左上角的坐标，不是视口或页面坐标——得用 getBoundingClientRect() 换算
如果 canvas 用了 CSS 缩放（如 width: 100%），必须用 canvas.width/canvas.height 属性值做归一化，否则判断失准
多边形顶点数超过 200 时，isPointInPath() 在 Firefox 下性能明显下降，建议预计算 bounding box 做快速剔除

示例片段：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
ctx.beginPath();
ctx.moveTo(120, 80);
ctx.lineTo(150, 60);
ctx.lineTo(140, 110);
ctx.closePath();
if (ctx.isPointInPath(x, y)) {
  // 点中了
}