如何在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 軸檢查公共畫布上的點擊

#然後迭代路徑數組以測試每個路徑的點擊情況。

<canvas id = "myCanvas1"></canvas> // Then it is attached with corresponding canvas.

以上是如何在HTML5畫布上使用多個點擊事件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！