ฉันจะเพิ่มตัวจัดการเหตุการณ์ onClick อย่างง่ายให้กับองค์ประกอบผ้าใบ HTML5 ได้อย่างไร

องค์ประกอบที่วาดในองค์ประกอบผ้าใบไม่มีการแสดง การแสดงเพียงอย่างเดียวคือพิกเซลที่ใช้และสี การวาดไปยังองค์ประกอบผ้าใบหมายถึงการวาดบิตแมปในโหมดทันที ในการรับเหตุการณ์การคลิกบนองค์ประกอบผ้าใบ (รูปร่าง) คุณต้องบันทึกเหตุการณ์การคลิกบนองค์ประกอบ HTML ของผ้าใบและกำหนดว่าองค์ประกอบใดถูกคลิก ซึ่งต้องมีการจัดเก็บความกว้างและความสูงขององค์ประกอบ

หากต้องการเพิ่มเหตุการณ์การคลิกไปยังองค์ประกอบผ้าใบของคุณ ให้ใช้โค้ดที่ให้ด้านล่าง

canvas.addEventListener('click', function() { }, false);

ตัวอย่าง

ในการพิจารณาว่าองค์ประกอบใดถูกคลิก ให้ใช้ข้อมูลโค้ดต่อไปนี้ -

var e = document.getElementById('myCanvas'),
   elemLeft = e.offsetLeft,
   elemTop = e.offsetTop,
   context = e.getContext('2d'),
   elements = [];

// event listener for click event
e.addEventListener('click', function(event) {
   var xVal = event.pageX - elemLeft,
   yVal = event.pageY - elemTop;
   console.log(xVal, yVal);
   elements.forEach(function(ele) {
      if (yVal > ele.top && yVal < ele.top + ele.height && xVal > ele.left && xVal < ele.left + ele.width) {
         alert(‘element clicked');
      }
   });
}, false);
elements.push({
   colour: '#1C2128’,
   width: 250,
   height: 200,
   top: 30,
   left: 20
});
elements.forEach(function(ele) {
   context.fillStyle = element.colour;
   context.fillRect(ele.left, ele.top, ele.width, ele.height);
});