一切尽在注释中

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 2dvar 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               bhGrad.addColorStop(1 / 6, '#FF0');   //1  - 30   255             x/30*255        0hGrad.addColorStop(2 / 6, '#0F0');   //31 - 60   (60-x)/30*255   255             0hGrad.addColorStop(3 / 6, '#0FF');   //61 - 90   0               255             (x-60)/30*255hGrad.addColorStop(4 / 6, '#00F');   //91 -120   0               (120-x)/30*255  255hGrad.addColorStop(5 / 6, '#F0F'); //121-150   (x-120)/30*255  0               255hGrad.addColorStop(6 / 6, '#F00'); //151-180   255             0               (180-x)/30*255ctx.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/100ctx.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};};//获取十六进制颜色字符串,如 #999999var 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){ //255var 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){// initvar 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){// 如果字符串中存在与字符相等的，返回truefor(var i=0;i<str.length;i++)if(ch==str[i])return true;// 遍历结束，还没有与字符相等的，返回falsereturn 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及以上