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

<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. bzoj1497【NOI2006】最大获利

    1497: [NOI2006]最大获利 Time Limit: 5 Sec  Memory Limit: 64 MB Submit: 3437  Solved: 1674 [id=1497" ...

  2. STL_算法_查找算法(binary_search、includes)

    C++ Primer 学习中.. . 简单记录下我的学习过程 (代码为主) 全部容器适用(O(log(n)))     已序区间查找算法 binary_search             //二分查 ...

  3. 【Android UI】案例02 圆角边框、圆角背景的实现(shape)

    本文主要分享圆角边框与圆角背景的实现方式.该方式的实现,须要了解shape的使用.该部分的具体介绍,请阅读博客http://blog.csdn.net/mahoking/article/details ...

  4. DDos游戏行业受攻击最多

    游戏行业遭遇DDOS攻击现状. 游戏一直是最易遭受黑客攻击的行业,高居全年DDOS攻击的48%.大规模攻击居多,平均值均超过100Gbps,攻击峰值急速上升,同比2015年增加了137.1%,其中攻击 ...

  5. manacherO(n)求最长回文子串 hihocoder1032

    原文地址:https://segmentfault.com/a/1190000003914228   http://blog.csdn.net/synapse7/article/details/189 ...

  6. 《剑指offer》旋转数组的最小数字

    一.题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 二.输入描述 输入一个递增排序的数组的一个旋转 三.输出描述 输出旋转数组的最小元素 例如: 例如数组{3,4,5,1 ...

  7. oracle（sql）基础篇系列（四）——数字字典、索引、序列、三范式

    数字字典表 --查看当前用户下面有哪些张表 select * from user_tables; select table_name from user_tables; --查看当前用户下面有哪些视图 ...

  8. 2018年湘潭大学程序设计竞赛 Fibonacci进制

    Fibonacci数是非常有名的一个数列,它的公式为 f(n)=f(n-1)+f(n-2),f(0)=1,f(1)=2.  我们可以把任意一个数x表示成若干不相同的Fibonacci数的和, 比如说1 ...

  9. vue+element-ui的简洁导入导出功能

    1.前段后台管理系统中数据展示一般都是用表格,表格会涉及到导入和导出;原生js导出excel2.导入是利用element-ui的Upload 上传组件; <el-upload class=&qu ...

  10. Spring学习详解（1）——Spring入门详解

    一:spring的基本用法: 1,关于spring容器: spring容器是Spring的核心,该 容器负责管理spring中的java组件, ApplicationContext ctx  = ne ...