html用变量存储颜色信息,我如何使用间隔循环修改HTML Canvas颜色？

hue变量和hsl样式中的百分比控制颜色。

要从RGB颜色150,150,200开始，将色调设置为240，将饱和度(hsl中的第二个参数)设置为25%，将亮度(第三个参数)设置为78%。

要以RGB颜色190,160,200结束，您需要循环，直到色相值达到285为止。您还需要一个饱和度值的变量，因为它应该以20%结束。

HSL colors

或者，使用RGB颜色代替HSL颜色...

编辑：点击

如果你想停止这个间隔，你需要把它的句柄存储在一个变量中：

var interval = window.setInterval(blank, 50);然后您可以使用它来停止时间间隔：

window.clearInterval(interval);我不知道为什么你想用随机值来改变颜色。为了简单起见，我在这个例子中用一个固定值替换它：

var hue = 240;

var sat = 25;

function blank() {

context.fillStyle = 'hsl(' + hue + ', ' + sat + '%, 80%)';

context.fillRect(0, 0, context.canvas.width, context.canvas.height);

hue += 0.9;

sat -= 0.1;

if (hue > 285) window.clearInterval(interval);

}

var interval = window.setInterval(blank, 50);编辑：点击

如果要反复淡入淡出而不是以特定颜色结束，请为该方向创建一个变量，并在到达每个结束颜色时对其进行更改：

var hue = 240;

var sat = 25;

var dir = 1;

function blank() {

context.fillStyle = 'hsl(' + hue + ', ' + sat + '%, 80%)';

context.fillRect(0, 0, context.canvas.width, context.canvas.height);

hue += 0.9 * dir;

sat -= 0.1 * dir;

if (hue <= 240 || hue >= 285) dir = -dir;

}

window.setInterval(blank, 50);