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

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

1 голос
/ 03 июня 2009

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

7 голосов
/ 03 июня 2009

Переменная цвета и проценты в стиле hsl управляют цветом.

Чтобы начать с цвета RGB 150, 150, 200, установите оттенок на 240, насыщенность (второй параметр в hsl) на 25% и яркость (третий параметр) на 78%.

Чтобы получить цвет RGB 190, 160, 200, необходимо выполнить цикл, пока значение оттенка не достигнет 285. Вам также понадобится переменная для значения насыщенности, поскольку она должна заканчиваться на 20%.

HSL цвета

В качестве альтернативы используйте цвета RGB вместо цветов HSL ...

Edit:
Если вы хотите остановить интервал, вам нужно сохранить его дескриптор в переменной: 

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

Edit:
Если вы хотите многократно увеличивать и уменьшать яркость вместо того, чтобы заканчиваться определенным цветом, создайте переменную для направления и изменяйте ее при достижении каждого конечного цвета: 

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);
1 голос
/ 03 июня 2009

Вот один из способов сделать это. Настроить шаг в соответствии с вашими предпочтениями. Комната для совершенствования кем-то, кто знает Джи лучше меня ... 

 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);
0 голосов
/ 03 июня 2009

Вам стоит проверить функцию hsl ()?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...