色相
HSL
style="background-color:hsl(0, 0%, 47%);"
颜色分量 | 解释 |
---|---|
色相(hue) | 色轮上从 0 到 360 的度数。 0 红色,60黄色,120 绿色, 180青色,240 蓝色,300紫色 |
饱和度(saturation) | 取值[0,1]、[0%,100%] ,0 灰色阴影,1全色。 |
亮度(lightness) | 取值[0,1]、[0%,100%] ,0黑色,0.5既不明也不暗,1白色。 |
HSV
style="background-color:hsv(0, 0%, 47%);"
颜色分量 | 解释 |
---|---|
色相(hue) | 色轮上从 0 到 360 的度数。 0 红色,60黄色,120 绿色, 180青色,240 蓝色,300紫色 |
饱和度(saturation) | 取值[0,1]、[0%,100%] ,0 灰色阴影,1全色。 |
明度(value) | 取值[0,1]、[0%,100%] ,0黑色,1光谱色 。 |
应用
大部分的应用软件,都会采用HSV交互,RGB进行保存:
比较
分量 | |
---|---|
RGB | 面向工业,因为需要精确的颜色值,改变颜色亮度,需要改变三个分量 |
HSV | 面向用户,颜色变暗变量更人性化,改变颜色亮度,只需要改变V分量 |
透明图背景网格生成
var size=8;
var canvas=document.getElementById("myCanvas");
canvas.width = canvas.height = size * 2;
var ctx=canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制红色的大图
ctx.fillStyle = "green";
ctx.fillRect(0, 0, size, size);// 绘制左上角的绿色块
ctx.translate(size, size); // 重置(0,0)点
ctx.fillRect(0, 0, size, size);// 绘制右下角的绿色块