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

<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. [Angular] Short Imports with TypeScript Path Mapping

    The idea is change from: import {CoreModule} from '../core/core.module'; to: import {CoreModule} fro ...

  2. 严重: 文档无效: 找不到语法。 at (null:2:19)

    1.错误描写叙述 严重: 文档无效: 找不到语法. at (null:2:19) org.xml.sax.SAXParseException; systemId: file:/D:/MyEclipse ...

  3. hdu 1978 记忆化搜索

    注意: dp[i][j] 表示(i,j)这个点有多少种方式       mark[i][j]表示这个点是否走过  假设有直接返回dp[i][j]    dp的求法为全部梦走到点的dp的和 注意mark ...

  4. wsimport 使用方法具体解释

    wsimport 使用方法 本文主要介绍wsimport的简单使用方法.帮助大家在webserviceclient开发过程中生成接口代码: 打开java JDK文件夹我们会看到wsimport工具,这 ...

  5. new，malloc，GlobalAlloc具体解释

    WINDOWS下最好的方式是用VirtualAlloc分配内存,他不是在堆,也不是栈,而是直接在进程的地址空间中保留一快内存.尽管用起来最不方便. 可是速度快,也最灵活 new,malloc,Glob ...

  6. CG 内置函数 和 HLSL 内置函数

    CG 内置函数  英伟达官网链接: http://http.developer.nvidia.com/Cg/index_stdlib.html absacosallanyasinatan2atanbi ...

  7. Most common words

    To find the most common words, we can apply the DSU pattern; most_common takes a histogram and retur ...

  8. kafka集群安装配置

    1.下载安装包 2.解压安装包 3.进入到kafka的config目录修改server.properties文件 进入后显示如下: 修改log.dirs,基本上大部分都是默认配置 kafka依赖zoo ...

  9. Tomcat下没有编译后的class文件

    输出的路径是否正确: Default output folder: 如果tomcat下还没有classes文件则没有编译好 需要重新引入jar包, clean工程,并重新部署项目. 这样就会在tomc ...

  10. SharePoint UserProfileService 接口列表 注解

    Remove Leader 除去领袖 Add Leader  加领袖 Get leaders  获得管理员 Get Profile Scherna Get Profile Scherna Names ...