訪問沒有ID的畫布元素

短故事：如何訪問沒有id或jquery id的畫布內的按鈕？（如果有幫助的話，canvas元素在一個div中有一個id）。訪問沒有ID的畫布元素

長篇故事：我在谷歌搜索到處都找不到解決方案。是否有畫布檢查員的擴展？我知道之前在Chrome上有一個，但之後就被刪除了。是恢復以前的chrome版本的唯一選擇嗎？我找不到任何其他允許畫布檢查的github擴展。

2016-02-26 Michael Chen

畫布裏面的按鈕是不是一個真正的按鈕 - 這是畫布上的按鈕的圖片。如果你只有一個大按鈕填充畫布，你可以在畫布上設置一個id並訂閱畫布上的常見事件 - 「myCanvas.on（'click'，...）'等等。如果你有多個按鈕一個畫布，然後你必須聽取鼠標事件，並單獨按鍵測試每個按鈕的繪圖。 – markE

但是說我想弄清楚畫布中的事件，我正在'檢查'的畫布甚至沒有ID。 –

您可以讓DOM使用'document.querySelectorAll'爲頁面提供頁面上所有畫布元素的列表。所有畫布元素都支持[相同的基本事件]（https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement）作爲其他元素。 **同樣，畫布上繪製的任何東西都只是繪製像素**，所以除了每個像素的RGB值之外，您無法「檢查」畫布上的任何內容。您可以使用'getImageData'獲取畫布的rgba像素數據的數組。 – markE

UPDATE

首先，如果你的畫布沒有一個id，那麼你需要給它一個。如果你不能給它一個，你可以使用Child Nodes

結束時更新

更新2

一種更好的方式來選擇一個div內的畫布是通過使用document.querySelector()中，你可以使用一個CSS選擇器來獲得這樣的畫布：document.querySelector("#divid canvas")。它返回第一個可能的元素。感謝您對坊間顯示我

結束時更新2

如果你可以在畫布上設置事件偵聽器來獲取鼠標的座標，你可以看到，如果你點擊的按鈕。

我使用canvas.getBoundingClientRect()來獲取頁面的偏移量，如果需要在某處滾動，則特別有用。

var canvas = document.getElementById("mycanvas"); 
 
var ctx = canvas.getContext("2d"); 
 
ctx.fillRect(10, 20, 100, 100); 
 
canvas.addEventListener("click", buttonClick, false); 
 
function buttonClick(e) { 
 
    alert("You clicked the canvas"); 
 
    if (e.clientX - canvas.getBoundingClientRect().left >= 10 && e.clientX - canvas.getBoundingClientRect().left <= 110) { 
 
    if (e.clientY - canvas.getBoundingClientRect().top >= 20 && e.clientY - canvas.getBoundingClientRect().top <= 120) { 
 
     alert("You clicked the button"); 
 
     } 
 
    } 
 
    }

<canvas id="mycanvas" width="250" height="250" style="border: 1px solid orange;"></canvas>

來源

2016-02-27 13:48:48 zevee

以下是如何使用已知ID抓取DIV內未知畫布的方法：var canvas = document.querySelector（「＃knownDivID canvas」）';-) – markE

對不起，不知道，更新回答 – zevee

訪問沒有ID的畫布元素

回答

相關問題