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

Question

据我了解，必须相对于canvas元素本身（即0、0）而不是相对于您实际填充的形状指定渐变填充。

问题：我对这个主张是否正确，是否有建议的解决方法？

例如（这里是JSFiddle）：

    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坐标。

例如，如果您有一条用二次曲线构建的圆弧，这将成为一个问题，因为如果不是Maths天才，您就不知道曲线的顶部位置，而只知道控制点。

Answer 1

如果您不知道要绘制的形状的界限，那么您将会遇到困难。

如果您正在使用渐变，尤其是重复使用渐变，则最好始终从原点开始制作渐变和形状，并将其转换为它们要成为的位置。

设置这种系统可以使定义梯度或多或少相对于对象的大小，但是您仍然必须自己进行边界计算。

这是转换渐变和形状以使其相对于画布的示例：

http://jsfiddle.net/simonsarris/RFgcs/