javascript - 选择图像区域并触发JS事件

Question

是否可以使用 HTML Canvas 或 Javascript 单击图像的一部分，并根据您单击的部分触发 Javascript 事件？

例如；

如果我有 watch 的图像并且用户单击表带，则会触发包含与表带相关内容的模式。同样，如果他们点击其中一根 watch 指针，则会触发不同的模式。

Answer 1

您可以使用 HTML 标签来执行此操作，请检查<area> html 中的标签可能会满足您的目的。

检查以下代码可能对您有帮助:

W3 Schools - Areamap

您还可以使用<canvas>或<svg>在Fabric.js的帮助下您可以以更提前的方式完成任务。

检查此链接，您将获得与图像或 Canvas 和 svg 相关的非常酷的东西:

MDN - Canvas API Tutorial

谢谢

function runfunc(planetId) {
  console.log('You selected:', planetId);
}

.as-console-wrapper { max-height: 2.8em !important; }

<p>Click on the Sun or on one of the planets to see which one was selected.</p>

<img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126"
     alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" id="Sun" onclick="runfunc(this.id)">
  <area shape="circle" coords="90,58,3" alt="Mercury" id="Mercury" onclick="runfunc(this.id)">
  <area shape="circle" coords="124,58,8" alt="Venus" id="Venus" onclick="runfunc(this.id)">
</map>