效果图：

代码：

<!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. HDU 1166 敌兵布阵 线段树单点更新求和

    题目链接 中文题,线段树入门题,单点更新求和,建一棵树就可以了. #include <iostream> #include <cstdio> #include <cmat ...

  2. androidstdio偶遇一

    android的错误 今天在安装androidstdio的过程中产生了遇到了一个错误(之前一直没有重新安装,因为觉得麻烦,但是电脑慢成狗了,只好重新安装....)那么现在步入正题.     首先安装的 ...

  3. 表达式求值（noip2015等价表达式）

    题目大意 给一个含字母a的表达式,求n个选项中表达式跟一开始那个等价的有哪些 做法 模拟一个多项式显然难以实现那么我们高兴的找一些素数代入表达式,再随便找一个素数做模表达式求值优先级表 - ( ) + ...

  4. 【笔记】MySQL查询排名

    select a.name, a.total_score,@rank:=@rank+1 as rank from (                  select u.name,uti.total_ ...

  5. PHP中计算时间段

    在php中 strtotime() 函数将任何英文文本的日期时间描述解析为 Unix 时间戳. 语法strtotime(time,now)  time函数为需要转化为时间戳的时间点  now为返回值的 ...

  6. Flume（1）使用入门

    一.概述: Flume是Cloudera提供的一个高可用的,高可靠的,分布式的海量日志采集.聚合和传输的系统. 当前Flume有两个版本Flume 0.9X版本的统称Flume-og,Flume1.X ...

  7. js获取浏览器body或窗宽度高度合集

    <script type="text/javascript"> var s = " "; document.documentElement.scro ...

  8. maven 速度快的镜像

    <mirrors> <mirror> <id>CN</id> <name>UK Central</name> <url&g ...

  9. 蓝桥杯算法提高 P1001（大数乘法）

      算法提高 P1001   时间限制:1.0s   内存限制:256.0MB   当两个比较大的整数相乘时,可能会出现数据溢出的情形.为避免溢出,可以采用字符串的方法来实现两个大数之间的乘法. 具体 ...

  10. git 的基本使用

    git 的使用步骤: 1. 新建一个文件夹,然后进入终端, 2. cd <文件夹路径>  ——->进入当前目录: 2.psw    ————>查看当前路径 3.git init ...