围绕圆创建径向渐变笔划

Question

我想围绕圆形创建一个径向渐变笔画，类似于

Here是我到目前为止所尝试的，

var canvas = document.getElementById("analog-stopwatch");
var context = canvas.getContext('2d');
var cx=200, cy=200, radius=100;
context.beginPath();
context.arc(cx, cy, radius, 0, 2 * Math.PI, false);
// I want the ring width to be 20
var radialGradient = context.createRadialGradient(cx, cy, radius, cx, cy, radius+20);
radialGradient.addColorStop(0, "black");
radialGradient.addColorStop(1, "blue");
//context.lineWidth = 20;
context.strokeStyle = radialGradient;
context.stroke();

我能想到的一种方法是创建一个带有径向渐变的圆圈。使用较小半径的并发圆来剪切它，但有没有更简单的方法来实现相同的效果？

Answer 1

有一种更简单的方法：沿一个方向绘制外圆（例如：顺时针），然后用另一个方向绘制内圆：它将从第一个路径中减去。
然后填写结果路径：

小提琴： http://jsbin.com/UCiCaYOn/1/edit?js,output

var canvas = document.getElementById("analog-stopwatch");
var context = canvas.getContext('2d');
var cx=200, cy=200, radius=100;
context.beginPath();
// !!!!
context.arc(cx, cy, radius+30, 0, 2 * Math.PI, false); // !!!
context.arc(cx, cy, radius, 0, 2 * Math.PI, true);  // !!!
// !!!!
var radialGradient = context.createRadialGradient(cx, cy, radius, cx, cy, radius+20);
radialGradient.addColorStop(0, "black");
radialGradient.addColorStop(1, "blue");
context.fillStyle = radialGradient;
context.fill();
context.closePath();

Answer 2

基本上你需要做的就是为梯度改变一点矩形并且你很好（不需要抚摸两个弧等）：

var lineWidth = 20;
var radialGradient = context.createRadialGradient(cx, cy, radius-lineWidth*0.5,
                                                  cx, cy, radius+lineWidth*0.5);

现在你可以抚续：

<强> Updated fiddle here