javascript - Canvas HTML5 上的径向渐变

Question

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

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

我试过 r1 =0，r2 = x,y 起点和 x,y 终点之间的距离，但这是个坏主意。

例如将路径 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 );