html 5 Canvas 阴影只有一个边框

Question

我正在尝试将模糊阴影应用于圆圈，但问题是我只想让外边缘产生这种模糊/阴影效果，我该怎么做？目前，阴影应用于所有边框哦，顺便说一句，我正在尝试制作动画...所以下面的 endingAngle 应该不断变化，从 0% 圆变为完整圆..不管怎样，这个问题是我如何只指定圆的一侧进行模糊适用于...谢谢

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();

Answer 1

这通常不是您要使用阴影的地方。你最好使用径向渐变。

例如:

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();​

我正在绘制一个具有更大半径和线宽的圆弧，该圆弧具有从绿色到透明的渐变(从中心到外部)。这会产生您想要的相同效果，但仅限于外部。