效果图：

代码：

<!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. Windows Server 2008 R2 IIS7.5 部署 MVC HTTP 404.0 Not Found 错误

    如图 在Windows Server 2008 R2 IIS7.5 部署 MVC HTTP 404.0 Not Found 错误,在Win7环境下测试正常,在百度中查找相关解决方法,如修改配置文件等, ...

  2. SerialPort 串口开发

    private SerialPort sPort = new SerialPort(); //串行端口资源 /// <summary> /// 函数功能:打开串口/关闭串口 /// < ...

  3. WIN7凭据管理器保存的凭据过段时间会自动删除的解决办法

    控制面板\用户帐户和家庭安全\凭据管理器 进入该页面可看到所有凭据

  4. c/c++的Soap应用

    1. 关于soap 在许多项目中团队中,我们常常会听到这样的话:我们这里是用webservice交互的.而说话的场景往往就是交互对象双方比较异构,所谓异构.即双方是不同的开发语言.不同的运行环境等.比 ...

  5. PHP 二维数组根据某个字段排序

    二维数组根据某个字段排序有两种办法,一种是通过sort自己写代码,一种是直接用array_multisort排序函数 一. 手写arraysort PHP的一维数组排序函数: sort  对数组的值按 ...

  6. 【Java EE 学习 76 上】【数据采集系统第八天】【角色授权】【用户授权】【权限的粗粒度控制】【权限的细粒度控制】

    一.角色管理 单击导航栏上的"角色管理"超链接,跳转到角色管理界面,在该界面上显示所有角色,并提供角色的增加和删除.修改超链接. 1.增加新角色(角色授权) 流程:单击增加新角色超 ...

  7. 用 Blend 给Windows Phone 应用创建 示例数据

    前言  创建 示例数据(Sample Data) 是提高程序开发效率的一个很有效方法,有了它,我们调UI的时候就不必每次都运行应用,然后在手机上观看页面效果了,配合 “AlignmentGrid.pn ...

  8. JAVA语言搭建白盒静态代码、黑盒网站插件式自动化安全审计平台

    近期打算做一个插件化的白盒静态代码安全审计自动化平台和黑盒网站安全审计自动化平台.现在开源或半开源做黑盒网站安全扫描的平台,大多是基于python脚本,安全人员贡献python脚本插件增强平台功能.对 ...

  9. [NHibernate]第一个NHibernate的应用配置

    NHibernate是.Net平台下一个成熟的,开源的对象关系映射器(ORM).本文来介绍第一次使用NHibernate的时候的配置. 1.下载NHibernate.Nhibernate官网最新版本为 ...

  10. Redis——学习之路三（初识redis config配置）

    我们先看看config 默认情况下系统是怎么配置的.在命令行中输入 config get *(如图) 默认情况下有61配置信息,每一个命令占两行,第一行为配置名称信息,第二行为配置的具体信息.     ...