Question

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

这个渐变必须沿着这个＆＃34;路径＆＃34;，所以我的想法是在x，y的开始路径，到路径末端的x，y做径向渐变，我有计算问题这两个放射状。你能解释一下如何计算这个径向吗？

我尝试了r1 = 0，并且r2 = x，y start和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 );

画布HTML5上的径向渐变

1 个答案: