Self-made color picker beautiful, haha nonsense not much to say directly on the code, hoping to help the needs of friends
<style>
. canvas_color{position:relative;width:400px;height:10px;}
. canvas_color canvas{Position:absolute; Border:0;background-color: '; left:0px; top:0px;width:400px;height:10px;}
canvas_box{width:5px; height:17px; background: #000; position:absolute; left:0px; top:-3px;}
</style>
<script type= "Text/javascript" charset= "Utf-8" src= "Js/jquery-1.10.2.js" ></script>
<script type= "Text/javascript" charset= "Utf-8" src= "Js/jquery-ui.min.js" ></script>
<script type= "Text/javascript" ></script>
<body>
<!--canvas drawing color Strips--
<div class= "Canvas_color" ><canvas id= "ColorPicker" >
</canvas>
<!--drag-and-drop frames-
<div class= "Canvas_box" ></div>
</div>
<br/>
<div id= "Textresult" >
</div>
<script type= "Text/javascript" >
if (document.createelement ("canvas")) {
if (document.getElementById ("ColorPicker"). GetContext) {
var can = document.getElementById ("ColorPicker");
Can.setattribute ("height", 5);
Can.setattribute ("width", 400);
var Ctx=can.getcontext ("2d");
var gradient = ctx.createlineargradient (0,0,400,10);//create a linear gradient. The starting coordinate is x1,y1 and the ending coordinate is x2,y2.
Gradient.addcolorstop (0, ' rgb (255,4,0) ');//Add a color stop to a gradient. The color stop is where the color change occurs in the gradient. Offset must be between 0 and 1.
Gradient.addcolorstop (0.2, ' rgb (237,181,0) ');
Gradient.addcolorstop (0.4, ' rgb (2,180,56) ');
Gradient.addcolorstop (0.6, ' RGB (0,232,255) ');
Gradient.addcolorstop (0.8, ' RGB (14,0,145) ');
Gradient.addcolorstop (1, ' RGB (255,33,205) ');
ctx.fillstyle=gradient;//sets the color used to fill an area-for example, fillstyle= ' RGB (255,0,0) '.
Ctx.fillrect (0,0,400,10);//fills a rectangle that is positioned at x and Y, with a width and height of W and H, respectively.
}
}
$ (function () {
$ ('. Canvas_box '). Draggable ({
Start:function () {//Drag to start
},
Stop:function (e) {
var x = E.clientx;
var y = e.clienty;
if (x<0) {
x=0;
}
if (x>400) {
x=399;
}
var imgdata=ctx.getimagedata (x,3,2,1);
$html = ' <span>r:<font color= ' Aqua > ' +imgdata[' Data '][0]+ ' </font> g:<font color= ' Aqua ' > ' + imgdata[' data '][1]+ ' </font> b:<font color= "Aqua" > ' +imgdata[' Data '][2]+ ' </font></span> '
$ (' #textResult '). HTML ($html);
},
Containment: [8, 5, 405, 5]//control drag area range
})
})
</script>
</body>
Making a color picker using HTML5 canvas