javascript - HTML5 定义图像部分坐标的最佳方式，当有人点击它时我们可以找到点击的部分

Question

我是 HTML5 的新手，我一直致力于将简单的 Flash 游戏转换为 HTML5。我要做的是，我有一个 Angular 色的图像，所以我定义了图像的各个部分，当用户点击头部时，它应该说你点击了头部，如果有人点击例如手上它应该说你已经点击了手或者它是在 Angular 色的脸上点击。

我已经完成谷歌搜索，发现我们可以定义不同的形状，我已经绘制并成功了

所以我只想知道在我的图像中我应该做什么，我必须为不同的部分使用图像，或者我必须使用 HTML5 bezierCurveTo 函数绘制字符。

请告诉我最好的方法以及我该怎么做。

谢谢

Answer 1

您可以使用图像、SVG 元素或 Canvas 来完成。

如果您有图像或 SVG 元素，您可以 Hook onclick图像的事件以告知何时单击它。图像将是图像的矩形边界框，但 SVG 元素将是紧密边界。使用 document.getElementById(<id>)从您的页面获取元素。

如果您使用的是 Canvas，您还可以使用 onclick但在回调中，您可以使用 CanvasRenderingContext2D.isPointInPath() 查看该点是否在头部。这将允许您检查头部的确切边界，而不仅仅是头部周围的矩形。

canvas.onclick = function(event) {
  context.beginPath(); 
  // Recreate the head path here. 

  if (context.isPointInPath(event.offsetX, event.offsetY)) {
    // Click was within the head
  }
};