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

【问题标题】：How can I modify HTML Canvas colors using an interval loop?如何使用间隔循环修改 HTML Canvas 颜色？
【发布时间】：2010-10-31 00:37:08
【问题描述】：

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

如何更改起始颜色？

【问题讨论】：

嗯，它实际上以 rgb 190,160,200 开头；如何更改起始颜色？黑羊
不敢相信你自己写的。

标签： javascript css html canvas

【解决方案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);

【讨论】：

thanx，start-color 现在当然可以了，但是循环的代码是什么？
我添加了一个关于如何循环到特定值以及如何结束间隔的示例。
对不起，但我的英语不足以解释我想要构建的内容。检查此 .gif 以查看：blacksheep.sil.at/li_o.gif

【解决方案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);

【讨论】：

【解决方案3】：

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

【讨论】：

我宁愿认为它们是矩形左上角的坐标...