JavaScript中的自定义形状（螺旋）动画按钮

Question

如何生成自定义形状的按钮？

具体来说，我正在尝试生成类似于这种螺旋的东西：

（好奇，这代表了钢琴上的88个键）。

我想我可以在数学上为每个按钮创建一组“周边路径”点 - 这很容易。

我不确定是否可以创建一些可点击的SVG多边形，或者我是否需要以数学方式处理点击以确定它最靠近哪个按钮。

按钮将被着色。当按下按钮时，我需要它显得更大更亮，然后逐渐缩小回原来的大小和颜色。

编辑：我将一如既往地上传我的调查结果并最终将其整理并将其分解为答案。

Add onclick and onmouseover to canvas element
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
http://www.rgraph.net/blog/2012/october/new-html5-canvas-features.html
http://www.rgraph.net/blog/2014/march/an-example-of-html5-canvas-path2d-objects.html
- ＆GT; https://hacks.mozilla.org/2015/01/canvas-2d-new-docs-path2d-hit-regions/
http://www.html5rocks.com/en/tutorials/raphael/intro/

以上链接似乎表明HTML Canvas提供了isPointInPath（）