首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

在线取色器(ColorPicker)的制造方式

2013-12-02 
在线取色器(ColorPicker)的制作方式??? }??? g g.toString(16)??? if(g.length 1){??? ??? g 0

在线取色器(ColorPicker)的制作方式
??? }
??? g = g.toString(16);
??? if(g.length == 1){
??? ??? g = "0" + g;
??? }
??? b = b.toString(16);
??? if(b.length == 1){
??? ??? b = "0" + b;
??? }
??? return "#" + r + g + b;
}

hsl2rgb = function(h, s, l){
??? var r, g, b;
??? if(s == 0){
??? ??? r = g = b = 255;
??? }
??? else{
??? ??? var q = (l<0.5)?(l * (1.0+s)):(l+s - (l*s));
??? ??? var p = (2.0 * l) - q;
??? ??? var Hk = h/360.0;
??? ??? var T = [];
??? ??? T[0] = Hk + 0.3333333;
??? ??? T[1] = Hk;
??? ??? T[2] = Hk - 0.3333333;
??? ??? for(var i=0; i<3; i++){
??? ??? ??? if(T[i] < 0) T[i] += 1.0;
??? ??? ??? if(T[i] > 1) T[i] -= 1.0;
??? ??? ??? if((T[i]*6) < 1){
??? ??? ??? ??? T[i] = p + ((q-p)*6.0*T[i]);
??? ??? ??? }
??? ??? ??? else if((T[i]*2.0) < 1){
??? ??? ??? ??? T[i] = q;
??? ??? ??? }
??? ??? ??? else if((T[i]*3.0) < 2){
??? ??? ??? ??? T[i] = p + (q-p) * ((2.0/3.0) - T[i]) * 6.0;
??? ??? ??? }
??? ??? ??? else{
??? ??? ??? ??? T[i] = p;
??? ??? ??? }
??? ??? }
??? ??? r = T[0]*255.0;?
??????? g = T[1]*255.0;?
??????? b = T[2]*255.0;
???????
??????? r = Math.round(r);
??????? b = Math.round(b);
??????? g = Math.round(g);
???????
??????? r = (r>255)? 255 : ((r<0)?0 : r);
??????? g = (g>255)? 255 : ((g<0)?0 : g);
??????? b = (b>255)? 255 : ((b<0)?0 : b);
??? }
???
??? return [r, g, b];
}

rgb2hsl = function(r, g, b){
??? r = r/255;
??? g = g/255;
??? b = b/255;
??? var max, min, diff, r_dist, g_dist, b_dist;
??? max = Math.max(Math.max(r, g), b);
??? min = Math.min(Math.min(r, g), b);
??? diff = max - min;
??? var h, s, l;
??? l = (max + min)/2;
??? if(diff == 0){
??? ??? s = 0;
??? ??? l = 0;
??? }
??? else if(l < 0.5){
??? ??? s = diff/(max + min);
??? }
??? else{
??? ??? s = diff/(2 - max - min);
??? }
??? r_dist = (max - r)/diff;
??? g_dist = (max - g)/diff;
??? b_dist = (max - b)/diff;
??? if(r == max){
??? ??? h = b_dist - g_dist;
??? }
??? else if(g == max){
??? ??? h = 2 + r_dist - b_dist;
??? }
??? else {
??? ??? h = 4 + g_dist - r_dist;
??? }
???
??? h = h * 60;
??? h = Math.round(h);
??? if(h < 0){
??? ??? h += 360;
??? }
??? else if(h >= 360){
??? ??? h -= 360;
??? }
??? return [h, s, l];
}

?

热点排行