如何使用JavaScript檢查HTML5 canvas元素是否在給定坐標區域中包含某些內容

Question

我目前正在使用Chart.js在項目中生成條形圖。 我已經將其設置為通過ASP.NET網絡方法將數據返回到圖表，並且已將其設置為使用靜態標簽。

我通過在onComplete回調之后迭代數據集和數據，然后使用fillText命令寫入畫布來完成此操作。

現在，我遇到標簽有時與圖表內容重疊或重疊的問題。

我想做的是檢查畫布在給定的點/區域上是否已經有東西。 這可能嗎？ 如果是這樣，怎么辦？

我是一位經驗豐富的程序員，但對JavaScript還是很陌生。 我搜索了幾個小時，試圖找到合適的解決方案，但找不到能正常工作的任何東西。

如果需要，我可以提供示例代碼和圖像，但是鑒於問題的范圍，我認為這不是必需的。

當前項目資源：JavaScript，JQuery，Chart.js，引導程序，ASP.NET Web方法

謝謝

Answer 1

好吧，我的要求發生了變化，我不再需要為此擔心，但是我仍然會發布我一直使用的代碼：

 var imgData = context.getImageData(0,0,canvas.width,canvas.height); // Function to find the hex color of a specific pixel in the imgData context. function getPixel(imgData, index) { var i = index * 4, d = imgData.data; return rgbToHex(d[i], d[i + 1], d[i + 2]) // returns hex string of rgb values. } // Function to caluclate offset of imgData context and then return hex color from getPixel function call. function getPixelFromCoordinate(imgData, x, y) { return getPixel(imgData, y * imgData.width + x); } // Function to convert a given rgb value to a hex string. function rgbToHex(r, g, b) { // Left shift values to allow for cheap hex construction return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); } 

這段代碼很好用，所以希望對其他人有幫助。

參考1： HTML Canvas中的getPixel？

參考2： 當用戶單擊圖像時，如何使用JavaScript或jQuery讀取圖像的像素？