เมื่อมีวงกลมวาดบนผ้าใบและเราใส่สีแดงบนครึ่งหนึ่งและสีเทาบนส่วนหนึ่งของวงกลม จากนั้นเมื่อคลิกที่สีแดง เราเรียกว่า function1
เมื่อคลิกส่วนสีเทา จะเรียกใช้ฟังก์ชัน 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
จากนั้นอาร์เรย์พาธจะถูกทำซ้ำเพื่อทดสอบแต่ละพาธสำหรับ Hit
<canvas id = "myCanvas1"></canvas> // Then it is attached with corresponding canvas.
