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];
}