Làm cách nào để sử dụng sự kiện nhiều lần nhấp trên canvas HTML5?

Khi có một hình tròn được vẽ trên canvas và chúng tôi đặt màu đỏ trên một nửa và màu xám trên một phần của hình tròn, sau đó nhấp vào màu đỏ, chúng tôi gọi function1.

Khi nhấp vào phần màu xám, hàm 2 được gọi và chúng ta cần sử dụng các đối tượng đường dẫn có thể tái sử dụng để lưu trữ các phần khác nhau mà chúng ta muốn kiểm tra. Trình xử lý nhấp chuột có thể được sử dụng để chia sẻ canvas và thực hiện công việc mong muốn của chúng tôi. Đối tượng Path2D có thể được sử dụng để lưu trữ thông tin về đường dẫn.

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);

Sau đó, việc kiểm tra được thực hiện đối với các nhấp chuột trên canvas phổ biến với trục x và y
Sau đó, mảng đường dẫn được lặp lại để kiểm tra từng đường dẫn để tìm lần truy cập.

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