如何檢查HTML5 canvas元素是否包含使用javascript的給定座標區域中的東西

Question

我目前正在使用Chart.js在項目中生成條形圖。我已經將它設置爲通過ASP.NET webmethod將數據返回給圖表，並且我已經將其設置爲使用靜態標籤。

我已經通過在onComplete回調後遍歷數據集和數據來完成此操作，然後使用fillText命令寫入畫布。

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

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

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

如果需要，我可以提供示例代碼和圖片，但我認爲這不是必需的，因爲問題的範圍。

當前的項目資源：JavaScript中，jQuery的chart.js之，引導，ASP.NET webMethods的

謝謝

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); 
 
}

此代碼工作得很好，SO 3 H對其他人會很有幫助。

參考文獻1：getPixel from HTML Canvas?

參考2：How to use JavaScript or jQuery to read a pixel of an image when user clicks it?