用js生圆成色系调色盘的算法
日期：2014-05-16 浏览次数：20585 次
js的调色盘组件其实制作起来还算比较复杂的,网上有一些现成的,但是大部分组件只能提供部分颜色的选取,例如web色.那如何制作一个全色系的颜色选取器呢? 本文主要将如何从底层来讲全色系用js生成一张色盘.然后如果要使用色盘的时候,利用坐标就可以逆过来计算出选取到的颜色了. 首先看个demo吧,下面的demo,需要在现代浏览器里浏览,这个色盘使用canvas动态生成的,每个像素的点都是经过计算后生成的,拖动滑动条可以调节明暗动态更新色盘.是不是很神奇,下面就会介绍这里面用到的一系列知识. ? 首先色彩有几种表示方法,这里用到两种,所以只介绍两种,一种叫做HSL,一种叫做RGB. http://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4 三个单词的意思分别是:hue（色相）、saturation（饱和度）、lightness（亮度）.其中色相的取值是0-360,饱和度取值是0-1,亮度取值也是0-1.其实用模型来理解HSL更容易理解.HSL模型建立起来后其实就是一个色相环 可以看出来了吧,用HSL来建模更形象直观,所以在程序中我们用HSL来建模,然后在显示到屏幕上的时候,我们用一个算法把HSL转换成RGB,然后显示到屏幕上.这个算法是这样的:
RGB大家很常用的,这个应该很熟悉了,就是red,green,blue.设置值的时候分别设置红绿蓝三色的比例就可以组合成不同的颜色,通常每个色系都是用0-255来表示.
HSL这个算是新概念吧,百科上有介绍,还是比较详细的:
如上面的例子中右边的色环所示.色相就代表角度,从0-360,正好转了一个圈,饱和度代表半径,亮度是第三个维度,用滑动条控制,三个维度结合起来就是一个完整的色系了.
vari;
varf,p,q,t;
varr,g,b;
if(s==0){
v=Math.floor(v*255);
return{
r:v,
g:v,
b:v
};
}
h/=60;
i=Math.floor(h);
f=h-i;
p=v*(1-s);
q=v*(1-s*f)
