admin管理员组

文章数量:1290947

I wrote this and I want to start and end the loop with certain colors (e.g. start with rgb 150,150,200; end with 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>

How can I change the starting color?

I wrote this and I want to start and end the loop with certain colors (e.g. start with rgb 150,150,200; end with 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>

How can I change the starting color?

  • javascript
  • css
  • html
  • canvas
Share Improve this question edited Feb 15, 2013 at 3:58 Jaime 1662 gold badges3 silver badges15 bronze badges asked Jun 3, 2009 at 15:03 blacksheepblacksheep 1
  • well, it actually starts with rgb 190,160,200; how can i change the starting color? blacksheep – blacksheep Commented Jun 3, 2009 at 15:14
Add a ment  | 

3 Answers 3

Reset to default 7

The hue variable and the percentages in the hsl style controls the color.

To start with the RGB color 150, 150, 200, set the hue to 240, the saturation (the second parameter in hsl) to 25% and the brightness (the third parameter) to 78%.

To end at the RGB color 190, 160, 200, you need to loop until the hue value reaches 285. You also need a variable for the saturation value, as that should end at 20%.

HSL colors

Alternatively, use RGB colors instead of HSL colors...

Edit:
If you want to stop the interval, you need to store it's handle in a variable:

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

Then you can use it to stop the interval:

window.clearInterval(interval);

I don't know exactly why you would want to use a random value to change the color. For simplicity I just replaced it with a fixed value in this example:

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:
If you want to repeatedly fade in and out instead of ending at a specific color, create a variable for the direction, and change it when you reach each ending color:

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

Here is one way to do it. Tweak step as per your preference. Room for improvement by somebody who knows js better than me...

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

You should check the hsl() function somehwere?

本文标签： javascriptHow can I modify HTML Canvas colors using an interval loopStack Overflow

版权声明：本文标题：javascript - How can I modify HTML Canvas colors using an interval loop? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741475144a2380836.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。