html中的hsl颜色表示法

最新推荐文章于 2021-06-03 23:41:03 发布

jupeizhong

最新推荐文章于 2021-06-03 23:41:03 发布

阅读量3.5k

点赞数 1

分类专栏： web 文章标签： html javascript css 设计

本文链接：https://blog.csdn.net/jupeizhong/article/details/39652165

版权

web 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

在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>