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 变化。