如何获得新的画布弧形笔画样式？

Question

所以我试图绘制一个简单的色调轮，显示红色，绿色和蓝色的组件以及它们之间的关系。问题在于我的（简单的，一度）弧线正在接受后面的弧线，尽管我使用的是beginPath()和closePath()。

我目前的进展是在http://meyerweb.com/eric/css/colors/hsl-from-rgb.html。最内层的戒指就是那个戒指的特色，蓝色渐变为黑色。下一个响铃应该只显示绿色渐变到黑色，而第三响铃应该只有红色渐变到黑色。最外面最厚的戒指是为了展示色相轮周围的全部光谱，您可以在细辐条中看到它（您可以在其他戒指中看到）。

如果我颠倒了绘图块的顺序，那么最外层的环很好，所有的内圈都弄乱了，所以很明显笔划样式正在向前泄漏。我只是无法弄清楚如何或为什么，也不知道如何克服这个问题。我是否应该定义四个单独的对象（例如，ctx1到ctx4）并分别绘制到每个对象？

我看着different fillStyle colors for arc in canvas，但那里的建议似乎没有帮助我。其他谷歌搜索没有任何使用。

Answer 1

不能使用小数为您的RGB值，你需要圆他们。

http://jsfiddle.net/M6KbD/

Answer 2

我没有花很长时间看看你的代码，但问题可能不在于画布，它可能是你绘制所有东西的顺序。

你有4套，对吗？你从第一组，1从第二，1从第三，1从第四绘图1，然后又1从第一...

如果您更改顺序一切都会好起来：

http://jsfiddle.net/muatT/

（懒洋洋地，我只是复制了整个for循环冗余代码，因为它是。你也许可以简化代码很多）