2023如何在HTML5画布上使用多个点击事件？

点击灰色部分时，调用函数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.