html中的hsl颜色表示法

来源：互联网发布：jenkins 源码编辑：程序博客网时间：2024/05/29 13:29

在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' onchange='ChangeColor()'/></br>S:<input type = 'range' min = '0' max = '100' id = 's' onchange='ChangeColor()'/></br>L:<input type = 'range' min = '0' max = '100' id = 'l' onchange='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>

0 0