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

<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. 阿里云部署Docker(9)----Dockerfile脚本定制镜像

    本文为原创文章.转载需注明转自:http://blog.csdn.net/minimicall? viewmode=contents 技术爱好者都是比較懒的.而docker又是开发人员支持起来的.所以 ...

  2. 联想z470 win7 64位双系统继续恢复镜像法安装黑苹果10.9.3

    之前的方法是安装 10.9 http://blog.csdn.net/kissing_huo/article/details/23559239的 苹果最新的swift的语言 出来  必须最新的xcod ...

  3. 【Android】把外部文件拷贝的AVD安卓模拟器上的sdcard上，而且在AVD中浏览sdcard的文件

    首先.实现这一切的大前提是.你的AVD安卓模拟器,在启动之前.有设置好sdcard的大小,例如以下图.同一时候,你的AVD安卓模拟器,要处于启动状态.否则无法运行例如以下的操作. 这里以<[An ...

  4. iOS - 自己定义alertView,继承自UIView,能够加入子视图,标题图片+文字

    这个更简单,能够看下demo       https://github.com/DYLAN-LWB/WBAlertView 自己定义alertView,继承自UIView,能够在消息区域加入子视图:a ...

  5. PForDelta的介绍论文

    ttp://paperhub.s3.amazonaws.com/7558905a56f370848a04fa349dd8bb9d.pdf FOR(Frame-Of-Reference),PFor(Pa ...

  6. AVEVA PDMS to DIALux

    AVEVA PDMS to DIALux eryar@163.com   Abstract. DIAL develops DIALux - the world's leading software f ...

  7. HDOJ 5296 Annoying problem LCA+数据结构

    dfs一遍得到每一个节点的dfs序,对于要插入的节点x分两种情况考虑: 1,假设x能够在集合中的某些点之间,找到左边和右边距离x近期的两个点,即DFS序小于x的DFS序最大点,和大于x的DFS序最小的 ...

  8. 51nod-1189: 阶乘分数

    [传送门:51nod-1189] 简要题意: 给出一个数n,求出有多少个正整数x,y(0<x<=y)满足$1/n!=1/x+1/y$ 题解: 一开始还以为不可做 结果推一下柿子就会了 $1 ...

  9. Sqlite3的安装Windows

  10. [codeforces 618 F] Double Knapsack (抽屉原理)

    题目链接:http://codeforces.com/contest/618/problem/F 题目: 题目大意: 有两个大小为 N 的可重集 A, B, 每个元素都在 1 到 N 之间. 分别找出 ...