画布HTML5上的径向渐变

Question

我在HTML5中使用Canvas中的radialGradient存在一些问题。 我有一些要在画布上绘画的线条，我想在这些线条上设置渐变。

这个梯度必须沿着这条“路径”运行，所以我的想法是在开始路径的x，y到路径末端的x，y进行径向渐变，而我在计算这两个半径时遇到问题。 您能解释一下如何计算此半径吗？

我尝试了r1 = 0，而r2 = x，y start和x，y stop之间的距离，但这不是一个好主意。

例如将路径x，y设置为：start（10,10）和stop（100,100），所以我们有一些简单的线，请帮助我如何为此设置渐变

那就是我的代码：

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;

Answer 1

这可能会给您想要的东西。

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