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

<html>
<head>
    <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>
</head>
<body>
<!--canvas画颜色条-->
<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>

使用 HTML5 canvas制作拾色器的更多相关文章

  1. HTML-参考手册: HTML 拾色器

    ylbtech-HTML-参考手册: HTML 拾色器 1.返回顶部 1. HTML 拾色器 选取颜色:     或输入颜色值: OK 或使用 HTML5: 选择的颜色: 黑色文本 阴影 白色文本 阴 ...

  2. 原生js编写的安全色拾色器

    <html > <head> <meta http-equiv="Content-Type" content="text/html; cha ...

  3. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  4. PS拾色器(前景色背景色)快捷键

    快捷键 I 是拾色器 X 是前后色切换

  5. 怎样用HTML5 Canvas制作一个简单的游戏

    原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...

  6. Android Studio中如何设置颜色拾色器工具

    Android Studio如何设置颜色拾色器工具Color Picker? 你可能下载过一些获取颜色值的一些小工具, 这种方式获取颜色,需要先切换窗口转跳到桌面,然后打开拾色器小工具程序,然后去拾取 ...

  7. Linux下的高级拾色器—Pick

    导读 虽然大多数设计师都在使用 Mac,但也有一少部分在使用 Windows 甚至是 Linux 系统.在 Mac 和 Windows 中都有非常丰富的拾色器工具或插件可用,反而在开源界中这类颜色选择 ...

  8. [译]怎样用HTML5 Canvas制作一个简单的游戏

    这是我翻译自LostDecadeGames主页的一篇文章,原文地址:How To Make A Simple HTML5 Canvas Game. 下面是正文: 自从我制作了一些HTML5游戏(例如C ...

  9. 优动漫PAINT基础系列之拾色器教学

    在优动漫PAINT中有类似Photoshop的拾色器功能么?在优动漫PAINT中,可以直接输入颜色数值选择颜色么?当然是可以的啦!怎么呼出拾色器界面~ 看这边... 前段时间小编有收到一些小伙伴的疑问 ...

随机推荐

  1. 【Hibernate学习】 —— 抓取策略(注解方式)

    当应用程序须要在关联关系间进行导航的时候.hibernate怎样获取关联对象的策略. 抓取策略的方式: FetchType.LAZY:懒载入.载入一个实体时.定义懒载入的属性不会立即从数据库中载入. ...

  2. Caused by: java.lang.ClassNotFoundException: com.njupt.libgdxbase.MainActivity

    在使用libgdx来开发游戏时.假设遇到这样的问题.非常可能是由于你没有在libgdx的项目中导入Android的现骨干jar包导致的. 解决方法例如以下: 右击项目---"build pa ...

  3. Android图片旋转,缩放,位移,倾斜,对称完整演示样例(一)——imageView.setImageMatrix(matrix)和Matrix

    MainActivity例如以下: import android.os.Bundle; import android.view.MotionEvent; import android.view.Vie ...

  4. hdu 4288 线段树+离线+离散化

    http://acm.hdu.edu.cn/showproblem.php?pid=4288 開始的时候,果断TLE,做的方法是,线段树上只维护%5==3的坐标,比方1 2 3 4 5 6 7  假设 ...

  5. Node.js 博客实例（十）pv统计和留言统计

    原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第十章,因为版本号等的原因,在原教程基础上稍加修改就可以实现. post.js中将var post={ ...

  6. Android触碰事件

    OnTouchListener使用 public class ViewActivity extends Activity implements View.OnTouchListener { @Over ...

  7. Can not Stop-Computer in powershell 6.0

    1 PS C:\Program Files\PowerShell\6.0.0-beta.6> Stop-ComputerStop-Computer : Failed to stop the co ...

  8. Mysql优化ibdata1大小

    在MySQL数据库中,如果不指定innodb_file_per_table参数来单独存在每个表的数据,MySQL的数据都会存放在ibdata1文件.mysql ibdata1存放数据,索引等,是MYS ...

  9. ELK到底是什么？那么多公司用！__转载

    Sina.饿了么.携程.华为.美团.freewheel.畅捷通 .新浪微博.大讲台.魅族.IBM...... 这些公司都在使用ELK!ELK!ELK! ELK竟然重复了三遍,是个什么?   一.ELK ...

  10. HDU 5214 Movie【贪心】

    题意:给出n,l[1],r[1],a,b,c,d 其中 l[i]=l[i-1]*a+b,r[i]=r[i-1]*c+d; 问能否从这n个区间中选出不相交不重叠的三个区间 看的题解 先考虑最左边的区间, ...