如何使用间隔循环修改HTML Canvas颜色？ [英] How can I modify HTML Canvas colors using an interval loop?
问题描述
我写了这个，我想用某些颜色
开始和结束循环（例如以rgb 150,150,200开头;以rgb 190,160,200结束）：
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?
推荐答案
hue变量和hsl样式中的百分比控制颜色。
The hue variable and the percentages in the hsl style controls the color.
To从RGB颜色150,150,200开始，将色调设置为240，将饱和度（hsl中的第二个参数）设置为25％，将亮度（第三个参数）设置为78％。
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%.
要以RGB颜色190,160,200结束，您需要循环直到色调值达到285.您还需要一个饱和度值变量，因为它应该以20％结束。
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%.
或者，使用RGB颜色代替HSL颜色......
Alternatively, use RGB colors instead of HSL colors...
编辑：
如果你想停止间隔，你需要将它的句柄存储在一个变量中：
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);
编辑：
如果你想反复淡入淡出而不是结束在特定的颜色，为方向创建一个变量，并在到达每个结束颜色时更改它：
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);
这篇关于如何使用间隔循环修改HTML Canvas颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
