当在画布上画一个圆，并在一半上涂红色，在一部分圆上涂灰色时，点击红色时，我们调用函数1。
点击灰色部分时，调用函数2，并且我们需要使用可重用的路径对象来存储我们想要测试的不同部分。点击处理程序可以用来共享画布并完成我们想要的工作。可以使用path2d对象来存储路径信息。
var path1 = new path2d();var path2 = new path2d();var newpaths = [path1,path 2]; // array is needed to store pathspath1.arc(200, 85,650, -0.2 * math.pi, 2.7 * math.pi); // path for red partpath2.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 stylectx1.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画布上使用多个点击事件？的详细内容。