Bagaimana untuk menggunakan berbilang acara klik pada kanvas HTML5?

Apabila melukis bulatan di atas kanvas dan melukis separuh daripadanya merah dan sebahagian daripada bulatan kelabu, apabila merah diklik, kita panggil fungsi 1.

Apabila bahagian kelabu diklik, fungsi 2 dipanggil, dan kita perlu menggunakan objek laluan boleh guna semula untuk menyimpan bahagian berbeza yang ingin kita uji. Pengendali klik boleh digunakan untuk berkongsi kanvas dan melakukan apa yang kita mahu. Maklumat laluan boleh disimpan menggunakan objek 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);

Kemudian semak klik pada kanvas biasa menggunakan paksi x dan y

Kemudian ulangi tatasusunan laluan untuk menguji klik pada setiap laluan.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan berbilang acara klik pada kanvas HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!