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