在html前段设计中颜色表示用的最多的莫过于rgb了,不过有的时候我们还是需要hsl表示法的,比如说绘制可见光谱,或是彩虹之类的。
下面是一个小demo,用来理解和学习html中hsl颜色表示法。通过调节三个滑动条可以改变方块的颜色。
代码如下:
<!DOCTYPE html>
<html>
<body>
<canvas id = 'mycanvas' width = '500' height = '100'>
You don't know HTML5?
</canvas>
<div id = 'aim' style = 'width:200px;height:200px'></div>
H:<input type = 'range' min = '0' max = '360' id = 'h' οnchange='ChangeColor()'/></br>
S:<input type = 'range' min = '0' max = '100' id = 's' οnchange='ChangeColor()'/></br>
L:<input type = 'range' min = '0' max = '100' id = 'l' οnchange='ChangeColor()'/></br>
<p id = 'info'></p>
</body>
<script>
var c=document.getElementById("mycanvas");
var cxt=c.getContext("2d");
for (x = 0;x < 361;++x){
cxt.fillStyle = 'hsl('+x+',100%,50%)';
cxt.fillRect(x, 0, x + 2, 100);
}
function ChangeColor()
{
var h = document.getElementById('h').value;
var s = document.getElementById('s').value;
var l = document.getElementById('l').value;
aim = document.getElementById('aim');
aim.style.backgroundColor = 'hsl('+h+','+s+'%,'+l+'%)';
info = document.getElementById('info');
info.innerText = 'hsl('+h+','+s+'%,'+l+'%)';
}
ChangeColor();
</script>
</html>