如何獲得新的畫布弧形筆畫樣式？

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循環冗餘代碼，因爲它是。你也許可以簡化代碼很多）