5

据我了解，必须相对于画布元素本身（即 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 坐标。

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

4

1 回答 1

6

如果您不知道要绘制的形状的边界，那么您将度过一段糟糕的时光。

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

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

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

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

于 2012-08-11T21:09:24.173 回答