html 颜色选择器,html5 颜色
可能大家见过很多使用jquery/js开发的颜色选择器，今天这里我们将使用HTML5技术来自己实现一个更棒的颜色选择器。希望大家喜欢！复制代码代码如下：
！-预览元素-
div class=preview/div
！-颜色选择器元素-
div class=颜色选择器 style= display:none
画布id= picker var= 1 width= 300 height= 300 /画布
div class=控件
divlabelR/标签输入类型=text id=rVal //div
divlabelG/label输入类型=text id=gVal //div
divlabelB/label输入类型=text id=bVal //div
divlabelRGB/label输入类型=text id=rgbVal //div
divlabelHEX/label输入类型=text id=hexVal //div
/div
/div
代码很简单，包含了2个部分，一个点击元素，一个用来展示颜色选择器的元素。JavaScript代码复制代码代码如下：
$(function(){
var bCanPreview=true//可以预览
//创建画布和上下文对象
var canvas=文档。getelementbyid( picker )；
var CTX=画布。获取上下文(“2d”)；
//绘制活动图像
var Image=new Image()；
image.onload=function () {
ctx.drawImage(Image，0，0，image.width，image。身高)；//在画布上绘制图像
}
//选择所需的色轮
var images RC= images/色轮1。png ；
开关($(画布)。属性( var ){
案例"2":
图像RC=图像/色轮2。png ；
打破；
案例"3":
图像RC=图像/色轮3。png ；
打破；
案例"4":
图像RC=图像/色轮4。png ；
打破；
案例"5":
图像RC=图像/色轮5。png ；
打破；
}
image.src=imageSrc
$(#picker ).鼠标移动(函数(e) { //鼠标移动处理程序
if (bCanPreview) {
//获取当前位置的坐标
var canvasOffset=$(canvas).offset()；
var canvasX=math。地板(例如pagex-canvasoffset。左)；
var canvasY=math。地板(e .佩吉-坎瓦索夫斯。顶)；
//获取当前像素
var imageData=CTX。getimagedata(canvasX，canvasY，1，1)；
var pixel=imageData.data
//更新预览颜色
var pixelColor=rgb( pixel[0]， pixel[1]， pixel[2])；
$(.预览)。css(backgroundColor ，像素颜色)；
//更新控件
$(#rVal ).val(pixel[0])；
$(#gVal ).val(pixel[1])；
$(#bVal ).val(pixel[2])；
$(#rgbVal ).val(pixel[0]， pixel[1]， pixel[2])；
var d color=pixel[2]256 * pixel[1]65536 * pixel[0]；
$(#hexVal ).val( # ( 0000 dcolor。tostring(16)).substr(-6))；
}
});
$(#picker ).单击(函数(e) { //单击事件处理程序
bCanPreview=！bCanPreview
});
$(.预览)。单击（函数(e) { //预览单击
$(.颜色选择器).fadeToggle(慢速,线性);
bCanPreview=true
});
});
大家可以看到，这是一个非常短的射流研究…代码，用来创建新的画布和对象，然后我们画出一个圆形的颜色板。你可以选择不同的颜色底板。这里使用一个参数来设定不同的选择。如下：复制代码代码如下：
画布id= picker var= 1 width= 300 height= 300 /画布
画布id= picker var= 2 width= 300 height= 300 /画布
画布id= picker var= 3 width= 300 height= 300 /画布
pre class=html name=code /pre
下面我们添加事件：鼠标移动，单击事件。这里使用框架来实现选择器的展现和隐藏。复制代码代码如下：
$(.预览)。单击(函数(e) { //预览单击$( .颜色选择器).fadeToggle(慢速,线性);bCanPreview=true })；
当我们的鼠标移动到选择对象上，我们需要刷新信息，例如，目前颜色复制代码代码如下：
$(#picker ).鼠标移动(函数(e) { //鼠标移动处理程序
if (bCanPreview) {
//获取当前位置的坐标
var canvasOffset=$(canvas).offset()；
var canvasX=math。地板(例如pagex-canvasoffset。左)；
var canvasY=math。地板(e .佩吉-坎瓦索夫斯。顶)；
//获取当前像素
var imageData=CTX。getimagedata(canvasX，canvasY，1，1)；
var pixel=imageData.data
//更新预览颜色
var pixelColor=rgb( pixel[0]， pixel[1]， pixel[2])；
$(.预览)。css(backgroundColor ，像素颜色)；
//更新控件
$(#rVal ).val(pixel[0])；
$(#gVal ).val(pixel[1])；
$(#bVal ).val(pixel[2])；
$(#rgbVal ).val(pixel[0]， pixel[1]， pixel[2])；
var d color=pixel[2]256 * pixel[1]65536 * pixel[0]；
$(#hexVal ).val( # ( 0000 dcolor。tostring(16)).substr(-6))；
}
});
$(#picker ).单击(函数(e) { //单击事件处理程序
bCanPreview=！bCanPreview
});CSS代码
不同颜色底板的CSS:复制代码代码如下：
/*颜色选择器样式*/。颜色选择器{
背景色：# 222222;
边框-半径：5px 5px 5px 5px
盒影：2px 2px 2px # 444444
颜色：# FFFFFF
字体大小：12px
位置：绝对；
宽度：460像素
}
#选取器{
光标：十字准线；
浮动：左；
边距：10px
边框：0;
}。控件{
浮动：对；
边距：10px
}。控制部门{
边框：1px固体# 2F2F2F
边距-底部：5px
溢出：隐藏；
填充：5px
}。控制标签{
浮动：左；
}。控制差异输入{
背景色：# 121212;
边框：1px固体# 2F2F2F
颜色：# DDDDDD
浮动：对；
字体大小：10px
高度：14px
左边距：6px
文本对齐：居中；
文本转换：大写；
宽度：75像素
}。预览{
背景：url(./images/select。png’)重复滚动中心中心透明；
边框半径：3px
盒影：2px 2px 2px # 444444
光标：指针；
高度：30px
宽度：30px
}
希望大家喜欢
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。