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

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

具体地说，我试图产生类似于这个螺旋的东西：

对于好奇的人来说，这代表了钢琴上的88个键

我想我可以用数学方法为每个按钮创建一组周长路径点——这很简单

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

按钮将是彩色的。当按下按钮时，我需要它看起来更大、更亮，然后逐渐缩小到原来的大小和颜色

编辑：和往常一样，我会上传我的发现，最终整理并将其分解成一个答案

->

---

上面的链接似乎表明HTML画布提供了isPointInPath

您是否希望使用HTML5画布绘制此内容？SVG可能也是一种很好的方法，您可以将单击事件附加到它。@jwatts1980我想是这样的。。。？我绝对不想限制自己去支持每一个旧的浏览器……除了在HTML5画布上使用2D动画技术之外，我不知道还有什么方法可以获得这些复杂的形状。但是我没有使用SVG。