复制代码

 

    代码如下：

 

    <！-预览元素-><divclass=“preview”></div><！-colorpicker元素-><divclass=“colorpicker”style=“display：none”><canvasid=“选择器“var=”1“width=”300“height=”300“></canvas><divclass=”controls“><div><label>R</label><inputtype=”text“id=“rVal”/></div><div><label>G</label><inputtype=“text”id=“gVal”/></div><div><label>B</label><输入type=“text”id=“bVal”/></div><div><label>RGB</label><inputtype=“text”id=“rgbVal”/></div><div><label>十六进制</label><inputtype=“text”id=“hexVal”/></div></div></div>

 

    代码很简单，包含了2个部分，一个点击元素，一个用来展示颜色选择器的元素。的JavaScript代码

 

    复制代码

 

    代码如下：

 

    $（function（）{varbCanPreview=true;//可以预览//创建画布和上下文对象varcanvas=document.getElementById（'picker'）;varctx=canvas.getContext（'2d'）;//正在绘制imagevarimage=newImage（）;image.onload=function（）{ctx.drawImage（image，0，0，image.width，image.height）;//在画布上绘制图像}//选择所需的色轮varimagesrc=“images/colorwheel1.png”;开关（$（canvas）.attr（'var'））{case'2'：imagesrc=“images/colorwheel2.png”;break;case'3'：imagesrc=“images/colorwheel3.png”;断开；大小写为'4'：

 

    imagesrc=“images/colorwheel4.png”;打破;情况'5'：imagesrc=“images/colorwheel5.png”;打破;}image.src=imageSrc;$（'＃picker'）。mousemove（function（e）{//鼠标移动处理程序if（bCanPreview）{//获取当前位置的坐标varcanvasOffset=$（canvas）.offset（）;varcanvasX=Math.floor（e.pageX-canvasOffset.left）;varcanvasY=Math.floor（e.pageY-canvasOffset.top）;//获取当前像素varimageData=ctx.getImageData（canvasX，canvasY，1，1）;varpixel=imageData.data;//更新预览颜色varpixelColor=“rgb（”+pixel[0]+“，”+pixel[1]+“，”+pixel[2]+“）”;

 

    $（'。preview'）。css（'backgroundColor'，pixelColor）;//更新控件$（'＃rVal'）。val（pixel[0]）;$（'＃gVal'）。val（pixel[1]）;$（'＃bVal'）。val（pixel[2]）;$（'＃rgbVal'）。val（pixel[0]+'，'+pixel[1]+'，'+pixel[2]）;vardColor=pixel[2]+256*pixel[1]+65536*pixel[0];$（'＃hexVal'）。val（'＃'+（'0000'+dColor.toString（16））。substr（-6））;}}）;$（'＃picker'）。click（function（e）{//点击事件处理程序bCanPreview=！bCanPreview;}）;$（'。preview'）。click（function（e）{//预览点击$（'。colorpicker'）。fadeToggle（“slow”，“linear”）;bCanPreview=true;}）;}）;

 

    大家可以看到，这是一个非常短的js代码，创建新的画布和对象，然后我们画出一个圆形的颜色板。你可以选择不同的颜色面板。这里使用一个参数来设定不同的选择。如下：

 

    复制代码

 

    代码如下：

 

    <canvasid=“picker”var=“1”width=“300”height=“300”></canvas><canvasid=“picker”var=“2”width=“300”height=“300”></canvas><canvasid=“picker”var=“3”width=“300”height=“300”></canvas><preclass=“html”name=“code”></pre>

 

    下面我们添加事件：mousemove，click事件。这里使用jQuery来实现选择器的展现和隐藏。

 

    复制代码

 

    代码如下：

 

    $（'。preview'）。click（function（e）{//预览点击$（'。colorpicker'）。fadeToggle（“slow”，“linear”）;bCanPreview=true;}）;

 

    当我们的鼠标移动到选择对象上，我们需要刷新信息，例如，当前颜色

 

    复制代码

 

    代码如下：

 

    $（'＃picker'）。mousemove（function（e）{//鼠标移动处理程序if（bCanPreview）{//获取当前位置的坐标varcanvasOffset=$（canvas）.offset（）;varcanvasX=Math.floor（e.pageX-canvasOffset.left）;varcanvasY=Math.floor（e.pageY-canvasOffset.top）;//获取当前像素varimageData=ctx.getImageData（canvasX，canvasY，1，1）;varpixel=imageData.data;//更新预览颜色varpixelColor=“rgb（”+pixel[0]+“，”+pixel[1]+“，”+pixel[2]+“）”;$（'。preview'）.css（'backgroundColor'，pixelColor）;//更新控件$（'＃rVal'）。val（pixel[0]）;$（'＃gVal'）。val（pixel[1]）;$（'#bVal'）。val（pixel[2]）;

 

    $（'＃rgbVal'）。val（pixel[0]+'，'+pixel[1]+'，'+pixel[2]）;vardColor=pixel[2]+256*pixel[1]+65536*pixel[0];$（'＃hexVal'）。val（'＃'+（'0000'+dColor.toString（16））。substr（-6））;}}）;$（'＃picker'）。click（function（e）{//点击事件处理程序bCanPreview=！bCanPreview;}）;

 

    CSS代码不同颜色底层的CSS：

 

    复制代码

 

    代码如下：

 

    /*colorpicker样式*/.colorpicker{background-color：＃222222;border-radius：5px5px5px5px;box-shadow：2px2px2px＃444444;颜色：#FFFFFF;font-size：12px;位置：绝对；宽度：460px；}#picker{光标：十字线；向左飘浮;边距：10px;边界：0;}.controls{float：right;边距：10px;}.controls>div{border：1pxsolid＃2F2F2F;底边距：5px;溢出：隐藏；填充：5px；}.controls标签{float：left;}.controls>div输入{

 

    背景颜色：＃121212;边框：1px实线＃2F2F2F;颜色：#DDDDDD；浮动：正确；font-size：10px;高度：14像素；左边距：6px;文本对齐：居中；文本转换：大写；宽度：75像素；}.preview{background：url（“../images/select.png”）重复滚动中心透明；border-radius：3px;box-shadow：2px2px2px＃444444;光标：指针；高度：30px；宽度：30px；}