如何让彩虹风格的背景颜色平滑变化？答案

【问题标题】：How to make the background change color smoothly in rainbow style?如何让彩虹风格的背景颜色平滑变化？
【发布时间】：2019-08-02 20:08:40
【问题描述】：

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

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

类似的东西

【问题讨论】：

到目前为止你尝试了什么？
没什么，我只知道有background();您可以更改背景的颜色，但我不知道如何将它分成不同的部分并为每个部分分配不同的颜色。

标签： javascript canvas p5.js

【解决方案1】：

您可以使用 HSB colorMode。这允许您通过使用从 0 到 360 的数字基本上“循环”通过色轮（即在色轮上指定度数）。使用这个想法，您可以在画布上绘制许多矩形，从画布顶部到底部（由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

【讨论】：