开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第26天，点击查看活动详情
开发过程中经常和颜色打交道，但是你对颜色的多种表示方式真的非常理解么？
色相
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);// 绘制右下角的绿色块
