使用 HTML5 canvas制作拾色器

自制的拾色器漂亮吧，哈哈废话不多说直接上代码，希望可以帮到需要的朋友

<html>
<head>
    <style>
        .canvas_color{position:relative; 400px;height: 10px;}
        .canvas_color canvas{ position: absolute; border:0;background-color:'';left:0px; top:0px; 400px;height: 10px;}
        .canvas_box{ 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>
</head>
<body>

<div class="canvas_color"><canvas id="colorPicker">
</canvas>

<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);//创建一个线性渐变。起始坐标为 x1,y1，结束坐标为 x2,y2。
                gradient.addColorStop(0,'rgb(255,4,0)');//向一个渐变添加一个颜色停止。颜色停止（color stop）是渐变中颜色更改发生的位置。offset 必须介于 0 到 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;//设置用于填充一个区域的颜色 — 例如，fillStyle='rgb(255,0,0)'.
                ctx.fillRect(0,0,400,10);//填充一个定位于 x 和 y，宽度和高度分别为 w 和 h 的矩形。 .
            }
        }
        $(function(){
            $('.canvas_box').draggable({
                start: function () { // 拖拽开始

                },
                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]//控制拖动区域范围

            })
        })

</script>
</body>
</html>