如何使用间隔循环修改HTML Canvas颜色？

我写了这个,我想用某些颜色开始和结束循环(例如以rgb 150,150,200开始;以rgb 190,160,200结束):

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

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

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

HSL颜色

或者,使用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);