使用 RGB 变量在彩虹中循环的颜色不能平滑过渡

Question

我有它，这样随着圆的完成，正在绘制的圆将慢慢过渡到彩虹中。前两个工作得很好。不过，在那之后，它停止缓慢变化，只是捕捉到一个阴影，直到下一个阴影。你能告诉我我做错了什么吗？这可能是非常明显的事情：C

function setcolor() {
    if (degrees <= 60) {
            var g = Math.floor(255 * (degrees/60));
            color = "rgb(255, "+ g +", 0)";
        }
            else if (degrees <= 120) {
            var r = Math.floor(255 / (degrees/60));
            color = "rgb("+ r +", 255, 0)";
        }
            else if (degrees <= 180) {
            var b = Math.floor(255 * (degrees/60));
            color = "rgb(0, 255, "+ b +")";
        }
            else if (degrees <= 240) {
            (g = Math.floor(255 /(degrees/60)));
            color = "rgb(0, "+ g +", 255)";
        }
            else if (degrees <= 300) {
            (r = Math.floor(255 * (degrees/60)));
            color = "rgb("+ r +", 0, 255)";
        }
            else if (degrees <= 360) {
            (g = Math.floor(255 / (degrees/60)));
            color = "rgb(255, "+ g +", 0)";
        }
}

Answer 1

让我们来看看你的最后一个区块。它被称为 degrees <= 300 else ，所以我们知道至少degrees是 301。为了便于计算，我们将其称为 300。

g = Math.floor(255 / (degrees / 60));

这会导致255 / (300 / 60) = 255 / 5 = 51 - 这不是您所期望的，因为平滑过渡它应该从 255 到 0（或 0 到 255）。

这样做的原因是，您的degrees / 60应该从0过渡到1，它只在第一步中这样做。尝试(degrees - 300) / 60，因为这符合范围。

您还会注意到，为了平稳过渡，您需要使用255 * (1-(degrees-300)/60)

但是，当您可以这样做时，所有这些都没有意义：

color = "hsl("+degrees+"deg, 100%, 50%)";