1

私は HTML5 を初めて使用し、単純なフラッシュ ゲームを HTML5 に変換する作業を行っています。私がしなければならないことは、キャラクターの画像を持っているので、ユーザーが頭をクリックしたときに頭をクリックしたと言うように画像の部分を定義し、誰かがクリックした場合たとえば、手でクリックした、またはキャラクターの顔でクリックしたと言う必要があります。

グーグルで調べたところ、さまざまな形状を定義できることがわかり、描画して成功しました使用した画像

だから私は自分のイメージで何をしなければならないか、さまざまな部分にイメージを使用する必要があるか、HTML5 bezierCurveTo関数を使用して文字を描画する必要があることを知りたいだけです。

最善の方法と、それを行うにはどうすればよいか教えてください。

ありがとう

4

1 に答える 1

2

画像、SVG 要素、またはキャンバスのいずれかで実行できます。

画像または SVG 要素がある場合は、画像のイベントをフックしonclickて、いつクリックされたかを伝えることができます。画像は画像の長方形の境界ボックスになりますが、SVG 要素は狭い境界になります。document.getElementById(<id>)ページから要素を取得するために使用します。

Canvas を使用している場合は、 use も使用できます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
  }
};
于 2013-10-15T06:56:47.103 に答える