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

<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. 从一次生产事故说起——linux的单用户模式，救援模式等等

    伴随着今年linux上面最大一个安全漏洞bash漏洞的出现,我们公司也開始了风风火火的漏洞修复工作,机器一多,也就easy出问题,有台64位的linuxserver一不小心就升级了32位 bash 的 ...

  2. 【Struts2二】结果集（result-type）

    在jsp/servlet中,结果集一般是指请求转发和重定向这两种. Struts2作为框架,提供了基于这两种的很多其它的结果集! 在struts-default.xml中定义了一些默认的结果集:   ...

  3. nj08---process、console

    概念:所有属性都可以在程序的任何地方访问,即全局变量.在JavaScript中,通常window是全局对象,而Node.js的全局对象是global,所有全局变量都是global对象的属性,如:con ...

  4. 8.解决IntelliJ Idea 集成TortoiseSVN 时找不到svn.exe

    转自:https://blog.csdn.net/beibeijia125/article/details/70183533?utm_source=blogxgwz9 首先我们可以在http://su ...

  5. Kali linux 2016.2（Rolling）里Metasploit连接（包括默认和自定义）的PostgreSQL数据库之后的切换到指定的工作空间

    不多说,直接上干货! 为什么要这么做? 答: 方便我们将扫描不同的目标或目标的不同段,进行归类.为了更好的后续工作! 前期博客 Kali linux 2016.2(Rolling)里Metasploi ...

  6. Maven项目：Plugin execution not covered by lifecycle configuration 解决方案

    这个是eclipse中配置文件pom.xml报的错.具体错误信息: Plugin execution not covered by lifecycle configuration: org.apach ...

  7. 请问Typecho Mysql 数据库和Sqlite数据库我该如何选择。

    纠结如我,又纠结了,请大家帮忙看一下我该如何选择.就一个没有文章的博客.一直用VPS太浪费,现在换成了虚拟主机.但是虚拟主机的MYSQL数据库限制连接数30个,我不懂这是个什么概念,但是我觉得30太少 ...

  8. Linux 设置交换分区

    当需要添加swap分区时,可以使用如下方法:设置交换分区:1 以dd指令建立swapoff2 mkswap 来将swapfile 格式化为swap的档案格式.3 swapon 来启动该系统文件,使之成 ...

  9. mongodb 的索引

                索引加快了查询速度,但是降低了写入速度.所以不要在没必要的属性上加索引.             在 mongodb 中索引可以按倒序/正序创建,便于排序.           ...

  10. 【转】C#中RSA加密解密和签名与验证的实现

    [转]C#中RSA加密解密和签名与验证的实现 RSA加密算法是一种非对称加密算法.在公钥加密标准和电子商业中RSA被广泛使用.RSA是1977年由罗纳德•李维斯特(Ron Rivest).阿迪•萨莫尔 ...