Question

我写了这个，我想用某些颜色开始和结束循环（例如以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>

<小时/> 如何更改起始颜色？

Answer 1

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

Answer 2

这是一种方法。根据您的喜好调整步骤。有人比我更了解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);

Answer 3

您应该在某处检查hsl（）函数吗？

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

3 个答案: