キャンバス描画線形勾配で四角形を塗りつぶし

Question

描画線形グラデーションの塗りつぶしに問題があります。 2つのスクリーンショットはchrome（左）とFirefox（右）からのものです。ご覧のように、グラデーションは最初の170ピクセルの矩形にのみ適用されます（右側の画像ではよりよく見えますが、最後に追加したcolorStopでFirefoxが残ります）。次のコードは、200pxのグラデーションの高さでrectを塗りつぶしますが、170pxしか塗りつぶされない理由はわかりません。高さ= 200、左= 30、上= 30、幅= 300、半径= 3;助けのための

//Fill 
var lingrad = gcx.createLinearGradient(0, top, 0, Height); 
lingrad.addColorStop(0, 'white'); 
lingrad.addColorStop(0.5, '#66CC00'); 
lingrad.addColorStop(0.5, 'red'); 
lingrad.addColorStop(1, 'white'); 
lingrad.addColorStop(1, 'blue'); 
gcx.fillStyle = lingrad; 
gcx.beginPath(); 
gcx.lineWidth = 1; 
gcx.moveTo(left + radius, top); 
gcx.lineTo(left + Width - radius, top); 
//Top-right-corner: 
gcx.arc(left + Width - radius, top + radius, radius, (Math.PI/180) * 270, (Math.PI/180) * 0, false); 
gcx.lineTo(left + Width, top + Height - radius); 
//Bottom-right-corner: 
gcx.arc(left + Width - radius, top + Height - radius, radius, (Math.PI/180) * 0, (Math.PI/180) * 90, false); 
gcx.lineTo(left + radius, top + Height); 
//Bottom-left-corner: 
gcx.arc(left + radius, top + Height - radius, radius, (Math.PI/180) * 90, (Math.PI/180) * 180, false); 
gcx.lineTo(left, top + radius); 
//Top-left-corner: 
gcx.arc(left + radius, top + radius, radius, (Math.PI/180) * 180, (Math.PI/180) * 270, false); 
gcx.closePath(); 
gcx.fill(); 

ありがとう！

Answer 1

問題は、グラデーションの高さがグラデーションのy1-開始点に対して計算されないことです。その傾きは、キャンバス要素のy0-Startpointから計算されます。 y2のコードをy2 + y1に変更する（エンドポイントは開始点に対して計算されるようになりました）、問題を修正しました。

var lingrad = gcx.createLinearGradient(x1, y1, x2, y2 + y1);