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

}

總結

以上是生活随笔為你收集整理的html中在线取色器,在线取色器(ColorPicker)的制造方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。