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

Question

如何使用间隔循环修改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>

Run Code Online (Sandbox Code Playgroud)

如何更改起始颜色？

Answer 1

Guf*_*ffa 7

hue变量和hsl样式中的百分比控制颜色.

要从RGB颜色150,150,200开始,将色调设置为240,将饱和度(hsl中的第二个参数)设置为25%,将亮度(第三个参数)设置为78%.

要以RGB颜色190,160,200结束,您需要循环直到色调值达到285.您还需要一个饱和度值的变量,因为它应该以20%结束.

HSL颜色

或者,使用RGB颜色代替HSL颜色......

编辑:
如果要停止间隔,则需要将其句柄存储在变量中:

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

Run Code Online (Sandbox Code Playgroud)

然后你可以用它来停止间隔:

window.clearInterval(interval);

Run Code Online (Sandbox Code Playgroud)

我不知道你为什么要使用随机值来改变颜色.为简单起见,我在这个例子中用固定值替换它:

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

Run Code Online (Sandbox Code Playgroud)

编辑:
如果要反复淡入淡出而不是以特定颜色结束,请为方向创建变量,并在到达每种结束颜色时更改它:

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	17 年，3 月前
查看次数：	11686 次
最近记录：	13 年，7 月前