据我了解,渐变填充必须相对于 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
作为前两个参数传递。看来我必须传递矩形相对于 Canvas 的 X/Y 坐标。
如果您有一个用二次曲线构建的圆弧,这就会成为一个问题,因为如果不是数学天才,您不知道曲线的顶部位置 - 只知道控制点。
最佳答案
如果您不知道要绘制的形状的边界,您将会遇到麻烦。
如果您正在使用渐变,尤其是重复使用渐变,最好始终从原点制作渐变和形状,并将它们转换到它们将要出现的位置。
设置那种系统将使定义渐变或多或少与对象的大小有关,但您仍然必须自己进行边界计算。
这是一个转换渐变和形状以使其“相对”于 Canvas 的示例:
关于javascript - 相对于形状位置而不是 Canvas 位置的渐变填充?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11916585/