如何使用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读取图像的像素？