HTML 5畫布影只是一個邊框

我想將一個模糊陰影應用於一個圓圈，但事情是我只想要外邊緣有這個模糊/陰影影響，我該怎麼做？目前，影子適用於所有的邊界哦，順便說一下，我正在嘗試動畫...所以下面的endingAngle應該不斷變化，從0％圈變成完整的圈子..不管怎麼說，這個問題是如何我可以指定圓的一側，使模糊應用於...謝謝HTML 5畫布影只是一個邊框

context.shadowBlur = 20; 
    context.shadowColor = "rgb(0, 255 , 0)"; 
context.beginPath(); 
context.arc(295, 295, 175, 1.5 * Math.PI, endingAngle, false); 
context.lineWidth = 20; 
context.strokeStyle = 'red'; 
context.stroke(); 
context.restore();

來源

2012-04-02 user1118019

這通常不是你使用陰影的東西。你最好用徑向漸變。

例如：

http://jsfiddle.net/NEntS/

的代碼：

var rg = context.createRadialGradient(295, 295, 175, 295, 295, 175+20); 
rg.addColorStop(0, 'rgba(0,255,0,1)'); 
rg.addColorStop(0.8, 'rgba(0,255,0,.2)'); 
rg.addColorStop(1, 'rgba(255,255,255,0)'); 

// draw gradient behind 
context.strokeStyle = rg; 
context.beginPath(); 
context.arc(295, 295, 185, 1.5 * Math.PI, 2, false); 
context.lineWidth = 25; 
context.stroke(); 
context.restore(); 

// now stroke the red 
context.beginPath(); 
context.arc(295, 295, 175, 1.5 * Math.PI, 2, false); 
context.lineWidth = 20; 
context.strokeStyle = 'red'; 
context.stroke(); 
context.restore();

我畫與具有綠色到透明梯度更大的半徑和線寬度的圓弧（從中心到外部）。這樣可以達到你想要的效果，但只能在外面。

來源

2012-04-02 20:06:04

感謝哥們。有沒有一種方法可以模仿使用漸變模糊/發光？目前使用你的方法，它是接近的，但任何人都可以知道一個是單獨繪製的...... – user1118019 2012-04-03 22:41:37

你試過

ctx.shadowOffsetX 
ctx.shadowOffsetY

來定位你的影子？

參考MDN

來源

2012-04-03 07:38:54 jing3142

如果圓弧幾乎是一個完整的圓，這將不起作用 – 2012-04-03 13:53:19

HTML 5畫布影只是一個邊框

回答

相關問題