我已经为 Canvas 构建了一个分析数据可视化引擎，并被要求在数据元素上添加类似工具提示的悬停，以显示光标下数据点的详细指标。
对于简单的条形图和 Gaant 图表、树形图和具有简单方形区域或特定兴趣点的节点图，我能够通过使用 :hover 属性覆盖绝对定位的 DIV 来实现这一点，但还有一些更复杂的可视化效果，例如作为饼图和交通流渲染，其中有数百个由贝塞尔曲线定义的独立区域。
是否有可能以某种方式附加叠加层，或者在用户将鼠标悬停在特定的封闭路径上时触发事件？
每个需要指定悬停的区域定义如下:
context.beginPath();
context.moveTo(segmentRight, prevTop);
context.bezierCurveTo(segmentRight, prevTop, segmentLeft, thisTop, segmentLeft, thisTop);
context.lineTo(segmentLeft, thisBottom);
context.bezierCurveTo(segmentLeft, thisBottom, segmentRight, prevBottom, segmentRight, prevBottom);
/*
* ...define additional segments...
*/
// <dream> Ideally I would like to attach to events on each path:
context.setMouseover(function(){/*Show hover content*/});
// </dream>
context.closePath();
像这样绑定(bind)到一个对象在 Flash 或 Silverlight 中实现起来几乎是微不足道的，因为但是当前的 Canvas 实现具有直接使用我们现有的 Javascript API 并与其他 Ajax 元素集成的优势，我们希望避免将 Flash 放入混合。
有什么想法吗？
最佳答案
您可以处理 mousemove 事件并从事件中获取 x,y 坐标。然后您可能必须遍历所有路径以测试该点是否在路径上。我有一个 similar problem可能有一些您可以使用的代码。
以这种方式循环可能会很慢，尤其是在 IE 上。一种可能会加速它的方法 - 这是一种 hack，但它会非常有效 - 将更改绘制每条路径的颜色，这样人类就不会注意到它，但这样每条路径都会被绘制在不同的颜色。有一个表格来查找路径的颜色，只查找鼠标下像素的颜色。
关于javascript - 检测 HTML Canvas 中某些点的鼠标悬停？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1221347/