如何設置html5 canvas的陰影寬度？

Question

一個HTML5畫布的上下文具有與設定陰影以下屬性：

shadowOffsetX = float 
shadowOffsetY = float 
shadowBlur = float 
shadowColor = color 

其中沒有設置陰影的寬度。 用畫布設置所有可能的寬度？

shadowBlur似乎增加了寬度，但模糊變得更加不透明。

Answer 1

shadowBlur的較高值確實增加了陰影的寬度，但不幸的是它也降低了強度，因此非常高的值會產生幾乎看不見的模糊。

增加陰影強度的唯一方法是多次繪製對象。然而，當對象本身是透明的並且也可能是性能鉤子時，這會導致不期望的結果，因爲已經非常昂貴的模糊效果必須每一次重新計算。通過將帶有模糊效果的對象繪製到單獨的不可見畫布上，然後將此畫布多次繪製到實際畫布上，可以降低性能成本。不幸的是，這仍然是一個骯髒的黑客。

當你想創建真正的花哨的圖形效果，你應該考慮使用WebGL。學習曲線非常陡峭，但是當你掌握它的時候，你可以隨意使用OpenGL着色語言的全部功能（好吧，不是全部純電源版本1.00 - 但這已經足夠了很多直接在用戶GPU上計算出來的漂亮圖形效果）。

Answer 2

試試這個：

畫你的對象到畫布上， 增加線寬， 重繪對象到不同的畫布下方， 設置畫布上CSS3模糊效果下方。

當我用路徑繪圖時爲我工作。