Javascript HCL空间中的4点颜色插值

我正在生成4个点渐变（每个角）。要做到这一点，我有一个在HCL空间插值的每个角落的设置颜色。因为这很难自己完成，所以我使用了一个库（chroma.js）及其集成的scale（）函数。因为无法在两种以上的颜色之间插值，所以我使用的方法是先在x轴上插值，然后在y轴上插值。这种方法的问题是，当选择插值的路径改变时，中间存在伪影：

正如您在这张图片中所看到的，RGB插值不会发生这种情况，但它看起来不太好（颜色可能会变得有点暗淡）：

我的问题是，<强>是否有更好的方法来在中间删除这个分裂？< /强>

这是我用来生成此图像的代码（它很混乱，因为这只是一个概念证明）：

var colors=[“EC0000”、“4D0277”、“E8F600”、“00A2EE”]；
函数makeGradientAlt（像素、颜色）{
var-div=32；
var wid=pix.data.width/div；
var hei=pix.data.height/div；
var mode=“hcl”；
//var tscale=chroma.bezier（[tl，tr]）.scale（）.correctLightness（）；
//var bscale=色度、贝塞尔（[bl，br]）比例（）.亮度（）；
var tscale=chroma.scale（[colors[0]，colors[1]]）.mode（mode）；//.correctLightness（）；
var bscale=色度.刻度（[colors[2]，colors[3]]）.mode（mode）；//.correctLightness（）；
for（设cx=0；cx

迟交的稿件。我相信你根本没有体验到矩阵中间的混合工件。只是在黄色和蓝色点之间的底部x轴颜色渐变上有一个非常不均匀的源插值，在第五步和第六步之间非常明显，这会污染上面所有行中的4点混合。注意底部的第五个绿色台阶和第六个蓝色台阶之间的巨大对比。这种失真仅仅反映在它上面的所有行上，因为在两个源X轴渐变的上下颜色之间的Y轴上使用插值生成它们。相同的伪影不会发生在上部源渐变上，但底部的伪影非常明显，足以影响所有其他混合

---

我相信这个较低渐变上的伪影可能是由于HCL颜色空间转换本身的实现不准确，因为它应该由您的代码正确生成。

后期贡献。我相信你根本没有体验到矩阵中间的混合工件。只是在黄色和蓝色点之间的底部x轴颜色渐变上有一个非常不均匀的源插值，在第五步和第六步之间非常明显，这会污染上面所有行中的4点混合。注意底部的第五个绿色台阶和第六个蓝色台阶之间的巨大对比。这种失真仅仅反映在它上面的所有行上，因为在两个源X轴渐变的上下颜色之间的Y轴上使用插值生成它们。相同的伪影不会发生在上部源渐变上，但底部的伪影非常明显，足以影响所有其他混合

---

我相信这个位于较低斜坡上的工件可能是由于HCL颜色空间转换本身的实现不准确，因为它应该由您的代码正确生成。

请更新您的帖子，让您的问题更清楚吗？啊，是的，我忘了说清楚我到底需要什么样的帮助。你能更新你的帖子，把你的问题说清楚吗？啊，对了，我忘了说清楚我到底需要什么样的帮助