絢麗的javascript拾色器（不相容IE8及以下）

一切盡在注釋中

html節點

<div id="colorpicker" style="display:inline-block;">
	<input class="color-value" type="text" value="#ffffff" />
	<div class="canvas-box" style="display:none;padding:10px;border:1px solid #ccc;">
		<canvas id="canvas" style="cursor:crosshair;">
			你的浏覽器不支援canvas.
		</canvas>
	</div>
</div>
           

jscolor.js

/**
 * code by lonelydawn 161226
 * color picker 拾色器
 * need jQuery >= v1.10.2
 */

 // 1 滑鼠點選		click=getMixedColor() 十進制 getHexColor 十六進制
 // 2 擷取滑鼠位置	getPos();
 // 3 計算點選位置代表的兩個色度  getColorTop/getColorBottom(pos)  pos :x || y
 // 4 根據兩個色度計算出疊加色度  getMixedColor(color1,color2)
 // & 繪制色譜
 // & 10進制色值轉16進制色值
 // & 

// 建立拾色器
var createColorPicker=function(){
	var canvass=$("#canvas");	//擷取的是屬性集合 [canvas#canvas,context:document,selector:"#canvas"]
	var canvas=$("#canvas")[0];

	// 擷取canvas上下文環境 	for 2d
	var getContext=function(width,height){
		canvas.width=width;
		canvas.height=height;
		return canvas.getContext("2d");
	};

	//繪制色譜
	var drawBackground=function(ctx,width,height){
		// 初始清空繪圖區域
		ctx.clearRect(0,0,width,height);
		// 繪制水準全色漸變
		var hGrad=ctx.createLinearGradient(0,0,width,0);
		hGrad.addColorStop(0 / 6, '#F00');	//	x 		r 				g 	 			b
		hGrad.addColorStop(1 / 6, '#FF0');	//1  - 30  	255 			x/30*255		0
		hGrad.addColorStop(2 / 6, '#0F0');	//31 - 60	(60-x)/30*255	255				0
		hGrad.addColorStop(3 / 6, '#0FF');	//61 - 90	0 				255				(x-60)/30*255
		hGrad.addColorStop(4 / 6, '#00F');	//91 -120 	0 				(120-x)/30*255	255
		hGrad.addColorStop(5 / 6, '#F0F');	//121-150 	(x-120)/30*255	0  				255
		hGrad.addColorStop(6 / 6, '#F00');	//151-180 	255 			0 				(180-x)/30*255
		ctx.fillStyle=hGrad;
		ctx.fillRect(0,0,width,height);

		// 繪制垂直白色透明度漸變
		var vGrad=ctx.createLinearGradient(0,0,0,height);
		vGrad.addColorStop(0, 'rgba(255,255,255,0)');	//	y 		r 	g 	b  	 	α
		vGrad.addColorStop(1, 'rgba(255,255,255,1)');	//1-100 	255 255 255		y/100
		ctx.fillStyle=vGrad;
		ctx.fillRect(0,0,width,height);
	};

	//擷取上層圖層色道
	var getColorTop=function(y){
		return{
			r : 255,
			g : 255,
			b : 255,
			a : y/100
		};
	};

	//擷取下層圖層色道
	var getColorBottom=function(x){
		var r=255,g=255,b=255;
		if(x>0 && x<=30){
			r=255;g=x/30*255;b=0;
		}else if(x>30 && x<=60){
			r=(60-x)/30*255;g=255;b=0;
		}else if(x>60 && x<=90){
			r=0;g=255;b=(x-60)/30*255;
		}else if(x>90 && x<=120){
			r=0;g=(120-x)/30*255;b=255;
		}else if(x>120&& x<=150){
			r=(x-120)/30*255;g=0;b=255;
		}else if(x>150&& x<=180){
			r=255;g=0;b=(180-x)/30*255;
		}else return null;
		return {
			r:r,
			g:g,
			b:b
		};
	};

	/**
	 * C=α*A+(1-α)*B  單色道的混合計算公式
	 * α為A層(上層)的不透明度
	 * 本節的A層是垂直漸變色區域
	 */
	 var getMixedColor=function(cTop,cBtm){
	 	var r= Math.floor(cTop.r*cTop.a+(1-cTop.a)*cBtm.r),
	 	g= Math.floor(cTop.g*cTop.a+(1-cTop.a)*cBtm.g),
	 	b= Math.floor(cTop.b*cTop.a+(1-cTop.a)*cBtm.b);
	 	var value="rgba("+r+","+g+","+b+",1);";

	 	return{
	 		r: r,
	 		g: g,
	 		b: b,
	 		value:value
	 	};
	 };

	//擷取十六進制顔色字元串,如 #999999
	var getHexColorString=function(c){
		var cStr="#";
		// 将機關色度值轉換為字元
		var getChar=function(value){
			// var c='';
			// switch(value){
			// 	case 10:
			// 	case 11:
			// 	case 12:
			// 	case 13:
			// 	case 14:
			// 	case 15:
			// 		c=String.fromCharCode(value+87);
			// 		break;
			// 	default:
			// 		c=value.toString();
			// 		break;
			// };
			// return c;
			return "0123456789abcdef"[value];
		};
		// 将單通道色度值轉換為字元串
		var passToStr=function(value){ //255
			var pre=Math.floor(value/16);
			var back=value%16;
			return getChar(pre)+getChar(back);
		};
		return cStr+passToStr(c.r)+passToStr(c.g)+passToStr(c.b);
	};

	// 事件入口
	var enter=function(event){
		var ev=event || window.event;
		var rect = canvas.getBoundingClientRect();
	    var x= ev.clientX - rect.left * (canvas.width / rect.width);
	    var y= ev.clientY - rect.top * (canvas.height / rect.height);
	    var cDec = getMixedColor(getColorTop(y),getColorBottom(x));
	    var cHex = getHexColorString(cDec);
	    exit(cHex);
	};

	// 事件出口
	var exit=function(color){
		$(".color-value").val(color);
		$(".color-value").css("background",color);
	};

	// colorpicker && 初始化
	var create=function(w, h){
		// init
		var width  = w || 180;
		var height = h || 101;
		var ctx=getContext(width, height);

		drawBackground(ctx,width,height);

		// 綁定事件入口
		canvass.bind("click",enter);
	};

	// 解綁事件  不解綁事件的後果:每次create都會為節點綁定事件,一次觸發多次執行
	var destroy=function(){
		canvass.unbind("click");
	};

	return {
		create:create,
		destroy:destroy
	};
};

// 統治所有的 mouseenter & mouseleave 事件 
// 如果在mouseenter作用域内建立,則需要在mouseleave作用域删除
var cp=new createColorPicker();

/*
// 拾色器顯示開關
$('#colorpicker').click(function(){
	console.log("over");
	// $("#colorpicker .canvas-box").css("display","block");
	if(boxs==0){
		$("#colorpicker").append(
			"<div class='canvas-box' style='display:none;padding:10px;border:1px solid #ccc;'>"+
			"<canvas id='canvas' style='display:crosshair;'>你的浏覽器不支援canvas.</canvas>"+
			"</div>"
		);
		boxs++;
	}
	$("#colorpicker .canvas-box").css("display","block");
	cp.create();
});
$('#colorpicker').mouseleave(function(){
	console.log("out");
	// $("#colorpicker .canvas-box").css("display","none");
	$("div").remove(".canvas-box");
	if(boxs>0) boxs--;
	cp.destroy();
});
*/

// 拾色器顯示開關
$("#colorpicker").mouseenter(function(){
	$("#colorpicker .canvas-box").css("display","block");
	cp.create();
});

$("#colorpicker").mouseleave(function(){
	$("#colorpicker .canvas-box").css("display","none");
	cp.destroy();
});


// 判斷字元串是否是7位顔色字元串
var isColorStr=function(color){
		// 判斷字元是否存在于字元串
	var charInStr=function(ch,str){
		// 如果字元串中存在與字元相等的，傳回true
		for(var i=0;i<str.length;i++)
			if(ch==str[i])
				return true;
		// 周遊結束，還沒有與字元相等的，傳回false
		return false;
	};

	if(color.length!=7 || color[0]!="#")
		return false;
	color=color.toLowerCase();
	for(var i=1;i<color.length;i++){
		if(!charInStr(color[i],"0123456789abcdef"))
			return false;
	}
	return true;
}


// 輸入框輸入字元串若符合顔色格式,則取其值
$("#colorpicker .color-value").keyup(function(){
	var input=$("#colorpicker .color-value");
	console.log(input.val());
	if(isColorStr(input.val()))
		input.css("background",input.val());
});
           

測試結果: (滑鼠指針形狀 crosshair, 截圖時隐藏了)

chrome    

firefox

IE 9及以上