Javascript 相对于形状位置而不是画布位置的渐变填充？

据我所知，渐变填充必须相对于画布元素本身（即0，0）而不是相对于实际填充的形状来指定

问题：我的这一主张正确吗？有什么建议吗？

例如（）：

在那里，我做了一个长方形。我希望，要用从形状左上角开始的渐变填充它，我将传递

0，0

作为前两个参数。似乎我必须传递矩形相对于画布的X/Y坐标

---

比如说，如果你有一个用二次曲线构建的圆弧，这就成了一个问题，因为如果你不是数学天才，你不知道曲线的顶部位置，只知道控制点。

如果你不知道你正在绘制的形状的边界，你会过得很糟糕

如果使用渐变，尤其是重复使用渐变，最好始终从原点创建渐变和形状，并将它们转换到它们将要出现的位置

设置这种系统将使定义渐变或多或少地与对象的大小相关，但您仍然需要自己进行边界计算

下面是一个转换渐变和形状以使其与画布“相对”的示例：

---

+1以获取帮助。但是二次曲线的情况是，你不知道边界（即曲线的顶点）。今天我试图找到这个问题的数学公式，但失败了。@Utkanos任何方程的要点都是，给定一个数x，你可以找到满足解的另一个数。所以，y=（x-2）^2+4很容易解。比方说，x是2，那么你只需要得到y的4。所以，如果你有一条由某个函数定义的二次抛物线，那么你可以很容易地在曲线上生成点。例如，如果您使用

for（var i=0，len=whatever.width；i

遍历每个点，那么您可以使用

var y=i-2；var y*=y；var y+=4

（在上面的示例中，等式是y=（x-2）^2+4

    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();