据我了解，渐变填充必须相对于canvas元素本身（即0,0）指定，而不是相对于实际填充的形状。
问题：我对此断言是否正确，是否有建议的解决方法？
例如（JSFiddle here）：
ctx.beginPath();
ctx.rect(40, 50, 100, 70);
var grd = ctx.createLinearGradient(0, 50, 0, 120);
grd.addColorStop(0, "red");
grd.addColorStop(1, "blue");
ctx.fillStyle = grd;
ctx.fill();
在那里，我做了一个矩形。我希望，从形状的左上角开始用渐变填充它，我会将0, 0作为前两个参数传递。看来我必须传递相对于画布的矩形的X / Y坐标。
如果你有一个用二次曲线构建的弧，这就成了一个问题，因为你不知道曲线的顶部位置 - 只有控制点。
答案 0 :(得分：4)
如果您不知道正在绘制的形状范围，那么您将度过一段美好时光。
如果您正在使用渐变，尤其是重新使用渐变，最好始终从原点创建渐变和形状，并将它们转换为它们将要到达的位置。
设置这种类型的系统会使定义渐变或多或少相对于对象的大小，但你仍然必须自己进行边界计算。
以下是翻译渐变和形状以使其与画布“相对”的示例：