Como posso modificar cores lona HTML usando um loop intervalo?

votos
1

Eu escrevi isso e eu quero começar e terminar o ciclo com determinadas cores (por exemplo, começar com rgb 150150200; acabar com 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>


Como eu posso mudar a cor inicial?

Publicado 03/06/2009 em 16:03
fonte usuário
Em outras línguas...                            


3 respostas

votos
7

A variável matiz e as percentagens no estilo hsl controla a cor.

Para iniciar com a cor RGB 150, 150, 200, definir o matiz a 240, a saturação (o segundo parâmetro de HSL) para 25% e o brilho (terceiro parâmetro) a 78%.

Para terminar a cor RGB 190, 160, 200, você precisa loop até que o valor de tonalidade atinge 285. Você também precisa de uma variável para o valor de saturação, como que deve terminar em 20%.

cores HSL

Como alternativa, use as cores RGB em vez de cores HSL ...

Edit:
Se você quer parar o intervalo, você precisa armazená-lo é lidar em uma variável:

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

Em seguida, você pode usá-lo para parar o intervalo:

window.clearInterval(interval);

Eu não sei exatamente por que você iria querer usar um valor aleatório para mudar a cor. Para simplificar eu só substituiu-o com um valor fixo neste exemplo:

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:
Se você quiser desaparecer repetidamente dentro e para fora em vez de terminar em uma cor específica, crie uma variável para a direção, e alterá-lo quando você atingir cada cor final:

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);
Respondeu 03/06/2009 em 16:41
fonte usuário

votos
1

Aqui está uma maneira de fazê-lo. Tweak passo de acordo com sua preferência. Espaço para melhorias por alguém que saiba js melhor do que eu ...

 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);
Respondeu 03/06/2009 em 17:08
fonte usuário

votos
0

Você deve verificar o HSL function () somehwere?

Respondeu 03/06/2009 em 16:23
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more