如何為 Canvas 元素新增 onClick 事件處理程序？

為 Canvas 元素添加 onClick 事件處理程序

Canvas 元素提供了一種在網頁上繪製和操作圖形的通用且高效的方法。然而，在畫布內的各個形狀或元素中添加事件處理程序可能是一個挑戰。本指南將提供一個全面的解決方案，將 onClick 事件處理程序附加到 canvas 元素，使您能夠偵測畫布內特定區域的點擊。

Canvas 元素的事件處理

與傳統 HTML 不同元素，canvas 元素沒有可以互動的特定元素。相反，您需要使用不同的方法來捕獲畫布上繪製的形狀上的單擊事件。

Canvas 元素的事件監聽器

要處理畫布上的點擊事件，您可以使用addEventListener 方法：

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

此程式碼將事件監聽器附加到畫布元素，每當畫布上發生點擊時，該事件監聽器就會觸發回調函數。

偵測畫布中被點擊的元素

要確定畫布上的哪個形狀或元素被單擊，您需要執行一些計算：

var elemLeft = elem.offsetLeft + elem.clientLeft;
var elemTop = elem.offsetTop + elem.clientTop;
var context = elem.getContext('2d');

這些行計算畫布元素在頁面內的偏移量並取得2D 繪圖上下文。

使用陣列儲存元素資訊

要追蹤畫布上繪製的每個元素的位置和尺寸，請建立一個陣列來儲存元素物件：

var elements = [];

每個元素物件應包含形狀的顏色、寬度、高度、頂部偏移和左側偏移。

偵測特定形狀上的點擊

在點擊事件回呼函數中：

elem.addEventListener('click', function(event) {
    var x = event.pageX - elemLeft;
    var y = event.pageY - elemTop;

    // Collision detection between clicked offset and element
    elements.forEach(function(element) {
        if (y > element.top &amp;&amp; y < element.top + element.height
            &amp;&amp; x > element.left &amp;&amp; x < element.left + element.width) {
            alert('clicked an element');
        }
    });

}, false);

此程式碼擷取點擊座標並檢查elements 陣列中的每個元素，以確定按一下是否發生在形狀的邊界內。如果是這樣，它會觸發警報。

對先前的嘗試進行故障排除

您先前的嘗試不起作用，因為：

• 將警報的回傳值指派給onClick屬性，這會立即觸發警報。
• 互換使用' 和"，這可能會導致錯誤。
• 為onClick 屬性分配一個字串，防止事件附加。
• 使用古老的onclick 屬性，區分大小寫。

以上是如何為 Canvas 元素新增 onClick 事件處理程序？的詳細內容。更多資訊請關注PHP中文網其他相關文章！