HTML 5 холст тень только одна граница

Question

Я пытаюсь применить тень размытия к кругу, но дело в том, что я просто хочу, чтобы внешний край имел эффект размытия / тени, как я могу это сделать? в настоящее время тень применяется ко всем границам о, кстати, я пытаюсь анимировать ... так что конечный угол ниже должен постоянно меняться, чтобы перейти от 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

Вы пытались

ctx.shadowOffsetX   
ctx.shadowOffsetY

разместить свою тень?

Ссылка MDN

Answer 2

Обычно это не то, для чего вы используете тень.Вам лучше с радиальным градиентом.

Например:

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

Я рисуюдуга с большим радиусом и шириной линии, имеющая градиент от зеленого к прозрачному (от центра к внешнему).Это дает тот же эффект, который вы хотите, но только снаружи.