畫布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 );