可以使用 Canvas Arc 或 QuadCurve OnMouseOver 功能吗？答案

【问题标题】：Canvas Arc or QuadCurve OnMouseOver function possible?可以使用 Canvas Arc 或 QuadCurve OnMouseOver 功能吗？
【发布时间】：2011-12-29 20:19:55
【问题描述】：

我有一个圆形图，当用户将鼠标悬停在每个部分（弧）上时，我需要显示一个 div。

我打算使用画布： http://www.html5canvastutorials.com/labs/html5-canvas-planets-image-map/ 但是我无法在画布上绘制弧线——或者我应该使用任何其他技术来创建它吗？

【问题讨论】：

您包含的示例 URL 甚至 显示了如何创建弧线（尽管它正在使用它来绘制一个完整的圆）。

标签： html canvas css

【解决方案1】：

您可以draw an arc in HTML5 Canvas，使用上下文的arc() 或arcTo() 方法。

您可以在我写的这个小游戏中看到一个用 HTML5 Canvas 绘制的弧线示例：
http://phrogz.net/tmp/connections.html
游戏概念不是我的，只是实现。 p>

请注意，使用方形线帽样式，您甚至可以使用单个 arc 命令绘制楔形（圆段）。

【讨论】：

感谢您的帮助 - 我在做弧线时遇到了 2 个问题： 1- 除非填充弧线，否则我的悬停效果不起作用（我知道我可能做得不对，但我不确定不然怎么做）和2.弧线不能被填充，因为它是一个圆图，一个圆弧在另一个圆弧内
我想我需要的只是一个在弧形边框/线中工作的 context.onMouseover （如果存在？）。如果你知道怎么做请告诉我:)
您需要阅读this answer of mine，标题为“基础知识：HTML5 Canvas 作为非保留绘图模式图形 API” 的部分。画布无法检测到您悬停在特定区域上。我强烈建议您考虑使用 SVG 而不是 HTML5 Canvas。