HTML5 キャンバスで複数のクリック イベントを使用するにはどうすればよいですか?

キャンバス上に円を描いて、半分が赤く塗られ、一部が灰色で塗られているとき、赤をクリックすると関数1を呼び出します。

灰色の部分をクリックすると、関数 2 が呼び出され、テストするさまざまな部分を保存するために再利用可能なパス オブジェクトを使用する必要があります。クリック ハンドラーを使用して、キャンバスを共有し、必要な操作を行うことができます。パス情報は、Path2D オブジェクトを使用して保存できます。

var path1 = new Path2D();
var path2 = new Path2D();

var newpaths = [path1,path 2];   // Array is needed to store paths

path1.arc(200, 85,650, -0.2 * Math.PI, 2.7 * Math.PI);  // Path for red part
path2.arc(200, 85, 60, 2.7 * Math.PI, -1.1 * Math.PI);  //Path for  grey part


// Two path objects are rendered  using a common context ctx1, but with different style
ctx1.lineWidth = 16;
ctx1.strokeStyle = "#d43030";
ctx1.stroke(path1);
ctx1.strokeStyle = "#b8b8b8";
ctx1.stroke(path2);

次に、x 軸と y 軸を使用して共通キャンバス上のクリックをチェックします。

次に、パスの配列を反復処理して、各パスのクリックをテストします。

えええええ

以上がHTML5 キャンバスで複数のクリック イベントを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。