?

去我博客浏览吧:http://www.html-js.com/?p=1252

?

js的调色盘组件其实制作起来还算比较复杂的,网上有一些现成的,但是大部分组件只能提供部分颜色的选取,例如web色.那如何制作一个全色系的颜色选取器呢?

本文主要将如何从底层来讲全色系用js生成一张色盘.然后如果要使用色盘的时候,利用坐标就可以逆过来计算出选取到的颜色了.

首先看个demo吧,下面的demo,需要在现代浏览器里浏览,这个色盘使用canvas动态生成的,每个像素的点都是经过计算后生成的,拖动滑动条可以调节明暗动态更新色盘.是不是很神奇,下面就会介绍这里面用到的一系列知识.

首先色彩有几种表示方法,这里用到两种,所以只介绍两种,一种叫做HSL,一种叫做RGB.
RGB大家很常用的,这个应该很熟悉了,就是red,green,blue.设置值的时候分别设置红绿蓝三色的比例就可以组合成不同的颜色,通常每个色系都是用0-255来表示.
HSL这个算是新概念吧,百科上有介绍,还是比较详细的:

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模型建立起来后其实就是一个色相环
如上面的例子中右边的色环所示.色相就代表角度,从0-360,正好转了一个圈,饱和度代表半径,亮度是第三个维度,用滑动条控制,三个维度结合起来就是一个完整的色系了.

可以看出来了吧,用HSL来建模更形象直观,所以在程序中我们用HSL来建模,然后在显示到屏幕上的时候,我们用一个算法把HSL转换成RGB,然后显示到屏幕上.这个算法是这样的:

点击查看源代码( powered by www.html-js.com )