Question

有人可以解释我，最好是说明图片，这些方法如何运作？我已经查看了不同的示例和教程，但似乎无法掌握这个想法。我理解，createRadialGradient()会创建两个圆圈，但这两个圆圈如何相互关联以及addColorStop()方法？

Answer 1

是的，我知道这是坏死的......但这似乎是一个从未被解决的有效问题，所以我把它留在这里以防其他人需要它。

=============================================== =================================

嗯，渐变是从一种颜色到另一种颜色的平滑转换。

在任何渐变中，您可以选择颜色开始的点，颜色结束的点和所需的颜色，颜色在它们之间平滑过渡。

颜色停止用于确定哪些颜色将成为渐变的一部分，渐变中的颜色将出现在哪里。

在线性渐变中，颜色在一条直线上从一种颜色过渡到下一种颜色，以便沿着垂直于轴的直线形成颜色带。

在径向渐变中，颜色围绕中心圆（或点，即一个非常小的圆）缠绕，并从该中心过渡到渐变的边缘。

这意味着构成渐变的色带在从中心向边缘过渡时形成更大和更大的圆圈。

HERE是一个简单的径向渐变的例子，从中心的白色到外边缘的黑色。

这是createRadialGradient语法的起源。

第一个圆圈将是颜色开始的地方，我们将任意声明它从中心开始...让我们说是x：100，y：100

第二个圆圈将是颜色结束的地方，因为我们选择了中心开始它，颜色在圆圈的外边缘处完成（尽管这些可以很容易地反转）。

为简单起见，中心点（在本例中）将保持不变：x：100，y：100

这些圆圈之间的真正区别在于半径。由于中心应该很小，我们将给它一个半径为1，而圆的外半径越大，我们就会得到100。

这为我们提供了所需的参数：

x = 100;
y = 100;
radiusStart = 1;
radiusEnd = 100;

var grad = ctx.createRadialGradient(x,y,radiusStart,x,y,radiusEnd);

但是，如果我们尝试按原样显示此代码，我们将看不到任何内容......这是因为我们需要停止颜色。

使用两个参数声明颜色停止...停止的位置和颜色。

位置是介于0和1之间的数字，表示从开始到结束的距离的百分比。

如果我们希望颜色从白色开始，那么我们将使用：

grad.addColorStop(0,'#FFFFFF');

这意味着我们颜色停止从线下方的0％开始（意味着渐变开始的位置），并将颜色绘制为白色。

同样，第二个渐变应该是黑色，并且应该放在渐变的最后：

grad.addColorStop(1,'#000000');

请注意，这些不直接引用上下文...我们引用了上下文来创建渐变，但是我们直接将渐变添加到我们创建的渐变中。

当我们完成创建渐变时，只要我们创建的渐变仍在范围内，我们就可以将此渐变用作fillStyle（甚至是strokeStyle）。

完整代码：

x = 100;
y = 100;
radiusStart = 1;
radiusEnd = 100;

var grad = ctx.createRadialGradient(x,y,radiusStart,x,y,radiusEnd);
grad.addColorStop(0,'#FFFFFF');
grad.addColorStop(1,'#000000');

ctx.beginPath();
ctx.arc(x,y,radiusEnd,0,Math.PI*2,false);
ctx.fillStyle = grad;
ctx.fill();

在玩这个游戏时，不要忘记尝试一下。

尝试添加两个以上的色标...这意味着您可以从蓝色过渡到白色（无聊），而不是从蓝色过渡到绿色到黄色到橙色到红色到紫色。

请记住恰当地设置位置......例如，如果您有6种颜色（如上所述），并且您希望它们均匀间隔，那么您可以将位置设置为.2间隔：

grad.addColorStop(0,'#0000FF');
grad.addColorStop(.2,'#00FF00');
grad.addColorStop(.4,'#FFFF00');
grad.addColorStop(.6,'#FF8800');
grad.addColorStop(.8,'#FF0000');
grad.addColorStop(1,'#AA00AA');

尝试放置在同一位置的任何颜色停止都会相互覆盖。

另一个很酷的效果是在创建渐变时为圆圈设置两个不同的中心......这会给渐变带来不同的效果，并且可以成为你的武器库的一个有价值的补充。

HERE是来自W3C规范的两个图像（本身是HERE）。这两个都是径向渐变，第一个和第二个圆的中心点不同。

更好的例子是HERE，虽然代码本身是用svg编写的html背景，但这些例子仍然显示了一些使用具有不同中心的径向渐变的好方法。他介绍了径向渐变理论，并展示了一些非常好的例子。

最后，一个提示......虽然很有可能手工编写渐变，但它的屁股很痛苦。抓取Photoshop，Illustrator，GIMP或Inkscape通常要容易得多，并在其中一个中构建渐变...然后您可以直接调整渐变直到您喜欢它。然后只需将色标信息复制到画布代码即可。

希望其中一些可以帮助某人。

createRadialGradient（）和addColorStop（）方法如何工作？

1 个答案: