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

I wrote this and I want to start and end the loop with certain colors (e.g. start with rgb 150,150,200; end with rgb 190, 160, 200):

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

<!DOCTYPE HTML>
<html>
 <head>

 </head>
 <body>

  <canvas width="400" height="100"></canvas>

  <script>

   var context = document.getElementsByTagName('canvas')[0].getContext('2d');


   var lastX = context.canvas.width * Math.random();
   var lastY = context.canvas.height * Math.random();


   var hue = 100;

   function blank() {
    hue = hue + 5 * Math.random();

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

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

   }
   setInterval(blank, 50);

  </script>

 </body>
</html>

How can I change the starting color?

3 个解决方案

#1

The hue variable and the percentages in the hsl style controls the color.

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

To start with the RGB color 150, 150, 200, set the hue to 240, the saturation (the second parameter in hsl) to 25% and the brightness (the third parameter) to 78%.

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

To end at the RGB color 190, 160, 200, you need to loop until the hue value reaches 285. You also need a variable for the saturation value, as that should end at 20%.

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

HSL colors

Alternatively, use RGB colors instead of HSL colors...

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

Edit:
If you want to stop the interval, you need to store it's handle in a variable:

编辑:如果要停止间隔,则需要将其句柄存储在变量中:

var interval = window.setInterval(blank, 50);

Then you can use it to stop the interval:

然后你可以用它来停止间隔:

window.clearInterval(interval);

I don't know exactly why you would want to use a random value to change the color. For simplicity I just replaced it with a fixed value in this example:

我不知道你为什么要使用随机值来改变颜色。为简单起见,我在这个例子中用固定值替换它:

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);

Edit:
If you want to repeatedly fade in and out instead of ending at a specific color, create a variable for the direction, and change it when you reach each ending color:

编辑:如果要反复淡入淡出而不是以特定颜色结束,请为方向创建变量,并在到达每种结束颜色时更改它:

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);

#2

Here is one way to do it. Tweak step as per your preference. Room for improvement by somebody who knows js better than me...

这是一种方法。根据您的喜好调整步骤。有人比我更了解js的改进空间......

 var r1 = 150; var g1 = 150; var b1 = 200;
 var r2 = 190; var g2 = 160; var b2 = 200;
 var step = 0.02;
 var curr = 0;
 var blankIvID;

 function blank() 
 {
  var r = r1 + ((r2 - r1) * curr);
  var g = g1 + ((g2 - g1) * curr);
  var b = b1 + ((b2 - b1) * curr);
  curr = curr + step;
  context.fillStyle = 'rgb(' + r + ', ' + g + ', ' + b + ')';

  context.fillRect(0, 0, context.canvas.width, context.canvas.height);
  if (curr >= 1.0)
  {
    clearInterval(blankIvID);
  }
 }
 blankIvID = setInterval(blank, 50);

#3

You should check the hsl() function somehwere?

你应该检查一下hsl()函数吗?

#1