javascript - 如何让彩虹风格背景平滑变色？

Question

我正在使用 P5.js 库，我想让 Canvas 的背景以彩虹风格平滑且连续地改变颜色。

我该怎么做？提前非常感谢

类似这样的事情

Answer 1

您可以使用 HSB colorMode。这允许您使用 0 到 360 之间的数字(即指定色轮上的度数)基本上“循环”色轮。使用这个想法，您可以在 Canvas 上绘制许多矩形，从 Canvas 的顶部到底部(由 inc 指定的矩形数量)。每个矩形都有特定的颜色。 因此，连接所有这些矩形将允许您创建类似渐变的效果。

通过不断地为您的颜色提供偏移量(并将其限制在 0 到 360 的范围内)，您可以在色轮中循环。

参见下面的代码:

function setup() {
  createCanvas(400, 400);
}

let cOffset = 0;
function draw() {
    const inc = height/100;
    colorMode(HSB);

    for(let y = 0; y < height; y += inc) {
        let h = y / height * 360;
        fill(abs(h-cOffset)%360, 100, 100);
        noStroke();
        rect(0, y-inc, width, y);
    }

    cOffset += 5;
}

在此处查看工作版本:

https://editor.p5js.org/NickParsons/sketches/1xfjY-ZoE