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

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

问题：我在这个断言中是否正确，是否有一个建议的解决方法？

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

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

来源

2012-08-11 Utkanos

如果你不知道你正在绘制的形状的边界，你会有一个不好的时间。

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

建立这样的系统将使得定义渐变相对于对象的大小更多或更少，但是您仍然必须自己进行边界计算。

这里的平移梯度的例子和形状，使其“相对”画布：

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

来源

2012-08-11 21:09:24

+1的帮助。但是二次曲线的情况是你不知道边界（即曲线的顶点）的情况。我试图找到今天的数学公式，但失败了。 – Utkanos 2012-08-12 08:49:55

@Utkanos任何方程的全部点是给定一个数字x，你可以找到满足解的另一个数。所以，y =（x-2）^ 2 + 4很容易解决。比方说，x是2，那么你只需4就可以得到y。所以，如果你有一个由某个函数定义的二次抛物线，那么你可以很容易地在该曲线上生成点。例如，如果你运行了'for（var i = 0，len = whatever.width; i dylnmc 2017-07-05 18:03:52

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

回答

相关问题