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

Question

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

我该怎么做？提前致谢

像这样

Answer 1

您可以使用 HSB colorMode。这允许您通过使用从 0 到 360 的数字（即在色轮上指定一个度数）基本上 "cycle" 通过色轮。使用这个想法，您可以在 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

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

How to make the background change color smoothly in rainbow style?

javascript

canvas

p5.js