Rumah > Artikel > hujung hadapan web > 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.
rreeeeAtas 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!