Canvas制作取色板
在线效果：查看
附件是源代码，如果需要打开但不能上网，请手动修改Jquery等库
步骤：
1、首先制作一张取色板，作为img标签内容。可以使用PS制作。这里介绍使用html5的canvas来制作
制作后的canvas可以保存为图片。
var pixel = 4;
var canvas = document.getElementById("color_container");
var cxt=canvas.getContext("2d");
for(j=0; j<250; j++){
??? if(j%pixel == 0){
??? ??? for(i=0; i<360; i++){
??? ??? ??? if(i%pixel == 0){
??? ??? ??? ??? var s = getHSL(i, j);
??? ??? ??? ??? cxt.fillStyle= s;
??? ??? ??? ??? cxt.fillRect(i,j,4,4);
??? ??? ??? }
??? ??? }
??? }
}
2、监听img标签的onclick时间，根据鼠标位置换算出点击的颜色值
$("#color_container").click(function(a){
??? var target = a.target;
??? var parent = target.parentElement;
??? var left = parent.offsetLeft;
??? var top = parent.offsetTop;
??? var i = a.clientX - left;
??? var j = a.clientY - top;
??? //获取偏移值i、j做后处理
});
3、RGB、HSL、hex(例如#FFFFFF)之间的转换
hex2rgb = function(hex){
??? var h = [];
??? h[0] = hex.substring(1,3);
??? h[1] = hex.substring(3,5);
??? h[2] = hex.substring(5,7);
??? var r, g, b;
??? r = parseInt(h[0], 16);
??? g = parseInt(h[1], 16);
??? b = parseInt(h[2], 16);
??? return [r, g, b];
}
rgb2hex = function(r, g, b){
??? r = r.toString(16);
??? if(r.length == 1){
??? ??? r = "0" + r;
??? }
??? 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];
}
?