html5-canvas - 带有点击事件的画布中的多个弧

Question

问题 ：

尝试创建一个如下所示的布局，其中每个部分都是可点击的并且具有单独的实体。

尝试过的解决方案和问题：

用画布创建弧线。必须用笔画添加圆弧。中风不可点击。尝试了其他答案的黑客攻击，但它们似乎不起作用。

形状（弧）笔划上的单击事件不起作用

Answer 1

与其用弧线绘制，不如这样：

使用楔形而不是弧形

• 将 3 个外部形状绘制为楔形并将它们放在图层#1 上。
• 将 10 个内部形状绘制为楔形并将它们放在图层#1 上方的另一个图层#2 上。
• 将中心圆画成圆形，并将其放在图层#1 和图层#2 上方的另一个图层#3 上。
• 附上。（“点击”）到每个单独的楔子。

分层将为您提供您正在寻找的视觉“嵌套”效果。

分层将为您提供对每个楔块的适当点击控制。