Как я могу изменить цвета HTML Canvas, используя интервальный цикл?

Я написал это, и я хочу начать и завершить цикл с определенными цветами (например, начать с 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>

Как я могу изменить начальный цвет?

Источник

3 ответа

Переменная оттенка и проценты в стиле 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);
Источник

Вот один из способов сделать это. Настроить шаг в соответствии с вашими предпочтениями. Пространство для улучшения кем-то, кто знает 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);
Источник

Вы должны проверить функцию hsl()?

Источник
Другие вопросы по тегам