Javascript 画布上的径向渐变HTML5

我对HTML5中画布中的radialGradient有一些问题。我在画布上画了一些线条，我想在这些线条上设置渐变

这个梯度必须沿着这条“路径”运行，所以我的想法是在Begging路径的x，y，到路径末端的x，y，做径向梯度，我在计算这两个半径时遇到了问题。你能解释一下如何计算这个半径吗

我试着用r1=0，r2=x，y开始和x，y停止之间的距离，但这是个坏主意

例如，将路径x，y设置为：开始（10,10）和停止（100100），这样我们就有了一些简单的线，请帮助我如何设置这个梯度

这是我的密码：

var radius = Math.sqrt((XGStop-XGStart)*(XGStop-XGStart) + (YGStop-YGStart)*(YGStop-YGStart));

var lingrad = ctx.createRadialGradient(XGStart, YGStart, 0,  XGStop, YGStop,radius );
lingrad.addColorStop(0, 'red');
lingrad.addColorStop(1, 'yellow');
ctx.strokeStyle =lingrad;

---

这可能会给你想要的

var midpointX =  (XGStart + XGStop) /2;
var midpointY =  (YGStart + YGStop) /2;
var lingrad = ctx.createRadialGradient(midpointX, midpointY, 0,  midpointX, midpointY,radius );

---

var lingrad=ctx.createRadialGradient（XGStart、YGStart、radius/2、XGStop、YGStop、radius）。这就是你想要的吗？现在我尝试了（Xstart，Ystart，distance（path），Xstart，Ystart，0），可能效果很好。你确定需要径向渐变吗？从外观上看，我认为这是一个线性梯度。