效果图：

代码：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>canvas 颜色拾取器</title>

    <style>

        #canvas {

            border: 1px solid red;

        }

        #block {

            display: inline-block;

            width:50px;

            height: 50px;

            vertical-align: top;

            background-color: black;

        }

    </style>

</head>

<body>

    <canvas id="canvas" width="400" height="400">你的浏览器不支持canvas</canvas>

    <span id="block"></span>

    <script>

        //获取id

        var canvas = document.getElementById("canvas");

        var ctx = canvas.getContext("2d");

        //绘制填充颜色块

        for(var i = 0; i < 16; i++) {

            for(var j = 0; j < 16; j++) {

                // gba(255,255,0) --->gba(255,0,0)

                ctx.fillStyle = "rgb("+(255 - j*16)+","+(255 - i*16)+",0)";

                ctx.fillRect(i*25,j*25,25,25);

            }

        }

        // 显示获取的颜色

        var block = document.getElementById("block");

        // 点击利用imgDate获取rgb值

        canvas.onclick = function(e) {

            var e = e || window.event;

            //e.layerX，e.layerY相对于绑定事件对象canvas的坐标

            var x = e.layerX;

            var y = e.layerY;

            // console.log(e);

            var imgData = ctx.getImageData(x,y,1,1);

            var r = imgData.data[0];

            var g = imgData.data[1];

            var b = imgData.data[2];

            block.style.backgroundColor = "rgb("+r+","+g+","+b+")";

        }

    </script>

</body>

</html>

HTML5、canvas颜色拾取器的更多相关文章

  1. 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等

    1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. js颜色拾取器

    几年前,很难找到一个合适的颜色选择器.正好看到很多不错的JavaScript颜色选择器插件,故而把这些编译汇总.在本文,Web设计师和开发人员 Kevin Liew 选取了11个相应插件,有些会比较复 ...

  3. NX二次开发-Block UI C++界面Object Color Picker(对象颜色拾取器)控件的获取(持续补充)

    Object Color Picker(对象颜色拾取器)控件的获取 NX9+VS2012 #include <uf.h> #include <uf_obj.h> UF_init ...

  4. HTML5 Canvas 颜色填充学习

    ---恢复内容开始--- 如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle. fillStyle = color strokeStyle = color ...

  5. 推荐一款jQuery ColorPicked 颜色拾取器插件

    先看实现的效果图, 本文底部有完整demo 不想看我墨迹的可以跳过了^_^. 官网地址:http://www.eyecon.ro/colorpicker/#about 代码SVN 地址:https:/ ...

  6. bigcolorpicker 颜色拾取器插件——例

    参考:http://bigui4.sinaapp.com/picker/colorpicker.html 效果: html: <!DOCTYPE html> <html> &l ...

  7. HTML5 Canvas 获取网页的像素值。

    我之前在网上看过一个插件叫做出JScolor   颜色拾取器  说白了就是通过1*1PX的DOM设置颜色值通过JS来获取当前鼠标点击位置DOM的颜色值. 自从HTML5 画布出来之后.就有更好的方法来 ...

  8. H5标签-canvas实现颜色拾取功能

    HTML5 <canvas> 标签是用于绘制图像,不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本(通常是 JS)来完成实际的绘图任务. &l ...

  9. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

随机推荐

  1. mysql优化（初学）

    写的时候遇到了SQL语句的优化问题,在网上搜了一些学习.http://blog.csdn.net/kennyrose/article/details/7532032 索引: 1.可以在这些列上创建索引 ...

  2. SVN数据仓库迁移

    1.在新服务器上部署环境 yum -y install subversion 2.备份原服务器数据仓库 svnadmin dump /home/myrepos >/data/svn_dump s ...

  3. SQUID常用命令

    Squid日常维护过程中,常用的一些命令: 1,初始化你在 squid.conf 里配置的 cache 目录squid -z如果有错误提示,请检查你的 cache目录的权限.可以使用使用更改目录权限: ...

  4. iOS 数据存储规则

    概观 iCloud的备份包括,它可以自动每天通过Wi-Fi备份用户的iOS设备.在您的应用程序的主目录都被备份,唯一的例外是应用程序本身捆绑,缓存目录和temp目录.购买的音乐,应用程序,电子书,相机 ...

  5. BI项目记笔记索引

    这个笔记系列主要记录了在BI项目中,如何搭建环境进行源代码管理以及文档管理. 用到的产品包括: TFS Express Sharepoint Visual Studio SQL Server   配置 ...

  6. 解决Jquery mobile点击较长文本body的时候Header和footer会渐入渐出的问题

         在做一个Phonegap+Jqm工程的时候,出现了如题的问题,相信很多人都遇到过Jquerymobile点击body时候header和footer会闪烁的显示和隐藏问题,fixed却并不能真 ...

  7. WebService技术（二）— CXF

    前言:学习笔记,以供参考 Apache CXF 是一个开源的 Services 框架,CXF 帮助您利用 Frontend 编程 API 来构建和开发 Services .可以与Spring进行快速无 ...

  8. 整理：深度学习 vs 机器学习 vs 模式识别

    http://www.csdn.net/article/2015-03-24/2824301 近200篇机器学习&深度学习资料分享(含各种文档,视频,源码等) http://developer ...

  9. PHP中关于PDO的使用

    执行没有结果集的查询 执行INSERT,UPDATE,DELETE的时候,不返回结果集.这个时候可以是有exec(),exec()将返回查询所影响的行数 int PDO::exec ( string ...

  10. BestCoder Round #80 1002

    HDU 5666 Segment 题意:给你条斜率为-1,常数项为q(q为质数)的直线,连接原点与直线上整数格点,问你在有多少个格点在形成的无数个三角形内,而不在线段上,结果对P取模. 思路:best ...