效果图：

代码：

<!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. 机器学习caffe环境搭建——redhat7.1和caffe的python接口编译

    相信看这篇文章的都知道caffe是干嘛的了,无非就是深度学习.神经网络.计算机视觉.人工智能这些,这个我就不多介绍了,下面说说我的安装过程即遇到的问题,当然还有解决方法. 说下我的环境:1>虚拟 ...

  2. 解决ftp上传connection reset错误

    切换到管理员,cmd下面执行:netsh advfirewall set global StatefulFTP disable MS对此的解释:https://technet.microsoft.co ...

  3. 【笔记】js的内存字节转化

    function convertSize(size) {                if(!size) {                     return '0 Bytes';       ...

  4. UIAlertController使用

    // 将UIAlertController模态出来 相当于UIAlertView show 的方法// 初始化一个一个UIAlertController    // 参数preferredStyle: ...

  5. 手把手教你玩转nginx负载均衡（三）----配置虚拟服务器网络

    引言 虽然上一篇我们成功的启动了虚拟机,也安装好了操作系统,但是这台虚拟机和主机以及其他虚拟机是没有办法连通的,我们的目标是配置多台服务器并且配置nginx反向代理,来实现负载均衡,所以不能访问内网是 ...

  6. PHP两种基础的算法：冒泡、快速排序法》》》望能够帮助到大家

    首先扯个淡@@@@@@@@@ 算法是程序的核心,一个程序的好坏关键是这个程序算法的优劣. 冒泡排序法 原理:在要排序的一组数中,对当前还未排好的序列,从前往后对相邻的两个数依次进行比较和调整,让较大的 ...

  7. StartCom 申请 SSL 证书及 Nginx HTTPS 支持配置全攻略

    来源:https://www.williamyao.com/index.php/archives/1397/ 前言 最近收到 StartCom 的邮件,数字证书即将过期,想到去年在 StartSSL ...

  8. jsonp使用，spring4.x对jsonp的支持

    1.Java中接口 @RequestMapping("/token/{token}") @ResponseBody public Object getUserByToken(@Pa ...

  9. hellocharts折线图与柱状图的上下结合酷炫效果(学习笔记)

    二话不说先贴图 贴代码: LineColumnDependencyActivity.java package com.shaoxin.mylinecolumndependencyactivity; i ...

  10. js三种方法添加image

    1 var img = new Image(); 2 var img = document.createElement('image'); 3 img.innerHtml = '<img src ...