效果图：

代码：

<!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. git整理

    git图形客户端:SourceTree bash: 先初始化: git init 添加远程仓库: git remote add sae https://git.sinacloud.com/newapp

  2. navicat 破解

    首先上官网上下载LINUX版本: http://www.navicat.com/download 下载 navicat110_mysql_en.tar.gz 文件 下载后解压tar文件 tar -zx ...

  3. POI完美解析Excel数据到对象集合中（可用于将EXCEL数据导入到数据库）

    实现思路: 1.获取WorkBook对象,在这里使用WorkbookFactory.create(is); // 这种方式解析Excel.2003/2007/2010都没问题: 2.对行数据进行解析 ...

  4. IIS6.0 web.config

    IIS6.0环境下,要把托管管道模式 改为:经典. <?xml version="1.0" encoding="UTF-8"?> <confi ...

  5. 限制textarea的字数（包括复制粘贴）

    <textarea cols="100%" rows="10" id="tuconent" placeholder="评价( ...

  6. 浅谈UDP(数据包长度，收包能力，丢包及进程结构选择)

    UDP数据包长度 UDP数据包的理论长度 udp数据包的理论长度是多少,合适的udp数据包应该是多少呢?从TCP-IP详解卷一第11章的udp数据包的包头可以看出,udp的最大包长度是2^16-1的个 ...

  7. android的消息处理机制——Looper,Handler,Message

    在开始讨论android的消息处理机制前,先来谈谈一些基本相关的术语. 通信的同步(Synchronous):指向客户端发送请求后,必须要在服务端有回应后客户端才继续发送其它的请求,所以这时所有请求将 ...

  8. Windows7 64位系统搭建Cocos2d-x-2.2.1最新版以及Android交叉编译环境（详细教程）

    Windows7 64位系统搭建Cocos2d-x-2.2.1最新版以及Android交叉编译环境(详细教程) 声明:本教程在参考了以下博文,并经过自己的摸索后实际操作得出,本教程系本人原创,由于升级 ...

  9. linux安装jdk(非rpm命令)

    首先查看当前linux上安装的jdk版本: java -version 复制build 后面的jdk信息 卸载: rpm -e java-1.6.0_22-fcs 或者 yum -y remove j ...

  10. Android 图片圆角的简单方法

    package com.jereh.helloworld.activity.ui; import android.content.Context; import android.graphics.Ca ...