1

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

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

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

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

谢谢

4

1 回答 1

2

您可以使用图像、SVG 元素或画布来实现。

如果您有图像或 SVG 元素，则可以挂钩onclick图像的事件以判断它何时被单击。图像将是图像的矩形边界框，但 SVG 元素将是紧密边界。用于document.getElementById(<id>)从您的页面中获取元素。

如果你使用的是 Canvas，你也可以使用 useonclick但是在回调内部，你可以使用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
  }
};
于 2013-10-15T06:56:47.103 回答