html - HTML5キャンバスで形状の位置とグラデーションの位置はどのように関係していますか?

Question

このコードを持っています：

var gradient = ctx.createLinearGradient(0,0, 20, 0);

gradient.addColorStop(0.8, "rgb(250,250,0)");
gradient.addColorStop(1, "rgb(150,150,0)");

ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 20, 20);

fillRect の x、y を移動すると、結果のグラデーションは同じではなく、変化します。createLinearGradient の x、y に同じ値を割り当てても、まだ機能しません。だから、私は 100,100 の位置に 0,0 と同じ線形グラデーションを保持するボックスを描画したいのですが、どうすればそれを達成できますか? それらの間の関係は何ですか？

ありがとう！

Answer 1

解決しました。形状の x、y の変化に合わせてグラデーションのサイズを調整する必要がありました。