Canvas 是 HTML5 的画布元素,按照像素绘制图像。有时需要用户点击鼠标的时候获取像素值。

获取画布元素

  1. var canvas = document.getElementById("mycanvas");
  2. var ctx = canvas.getContext("2d");

在获取指定坐标的像素值

假设坐标为 mouseX 和 mouseY,则

  1. var c = ctx.getImageData(mouseX, mouseY, 1, 1).data;
  2. var red = c[0];
  3. var green = c[1];
  4. var blue = c[2];

即可。

c是一个长度为4的数组,分别是代表r、g、b、a。

Canvas 获取颜色值的更多相关文章

  1. js canvas获取图片base64 dataUrl

    function getImgBase64(path, callback) { var img = new Image(); img.src = path; //图片加载完成后触发 img.onloa ...

  2. canvas获取鼠标位置

    canvas获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  3. JavaScript 基于HTML5 canvas 获取文本占用的像素宽度

    基于HTML5 canvas 获取文本占用的像素宽度   by:授客 QQ:1033553122 直接上代码   // 获取单行文本的像素宽度 getTextPixelWith(text, fontS ...

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

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

  5. delphi 获取颜色值的RGB

    前言:http://www.cnblogs.com/studypanp/p/5002953.html 获取的颜色值 前面获取到一个像素点的颜色值后(十六进制),比如说(黄色):FFD1C04C(共八位 ...

  6. canvas获取摄像头的图像

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAugAAAF3CAIAAAB44CnMAAAgAElEQVR4nOy92a4kx5am1y8lQAIkCI

  7. jquery如何将获取的颜色值转换为十六进制形式

    jquery如何将获取的颜色值转换为十六进制形式:大家或许已经注意到了,在谷歌.火狐和IE8以上浏览器中,获取的颜色值是RGB形式,例如rgb(255,255,0),感觉非常不适应,或者在实际编码中不 ...

  8. iOS获取UIView上某点的颜色值

    项目需求中遇到获取UIView上某个坐标点的RGB颜色值的需求,现在把自己找到的解决方案简单总结记录一下,遇到了下面的情况: 不可移动的UIView 旋转式的UIView 滑条式的UIView 不可移 ...

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

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

随机推荐

  1. java邮件

    我们用过很多邮件,qq,163,网易等. 一.发送邮件需要遵循smtp协议,接收邮件需要遵循pop3协议 二.发邮件的过程 假设用qq邮件 写邮件-->点 “发送” --> qq邮件服务器 ...

  2. thinkphp 调用系统的方法

    在需要调用的脚本 加载 load('filename');//filename为文件名

  3. spring mvc环境配置

    spring mvc将所有的请求都经过一个servlet控制器-DispatcherServlet,这个servlet的工作就是将一个客户端的request请求分发给不同的springmvc控制器,既 ...

  4. JNI的一些知识:

    JNI字段描述符"([Ljava/lang/String;)V" 2012-05-31 12:16:09| 分类: Android |举报|字号 订阅 "([Ljava/ ...

  5. 使用AlarmManager定时更换壁纸----之一

    import android.os.Bundle;import android.app.Activity;import android.app.AlarmManager;import android. ...

  6. jquery之getJSON方法获取中文数据乱码解决方法

    最近公司做的东西要用到js,感觉js太繁琐,所以自己学起了jquery,发现jquery确实强大.在学到jquery ajax的时候(用的工具是eclipse),发现$.getJSON()方法请求服务 ...

  7. HDU 3567 Eight II 打表,康托展开,bfs,g++提交可过c++不可过 难度:3

    http://acm.hdu.edu.cn/showproblem.php?pid=3567 相比Eight,似乎只是把目标状态由确定的改成不确定的,但是康托展开+曼哈顿为h值的A*和IDA*都不过, ...

  8. 常州培训 day1 解题报告

    第一题:(骗分容易,AC难.) 题目大意: 给出一个字符串,找出满足条件A的区间的个数.A:字符A,B,C的出现次数相同. 都出现0次也算,区间的长度可以是0(就是只有一个数).30% |S| ≤ 1 ...

  9. clearfix

    过渡放在原:transiton:2s; 块无素:block,inline inline-block1,占一行,有宽,有高内元素:2,无宽高,内容撑开宽高.不支持上下margin.代码换行补解析.3, ...

  10. C++-dynamic_cast的用处

    主要用来在没有实现文件,只有头文件的情况下,添加派生类的功能,如下例给programmer加奖金. 注意:dynamic_cast不能用于没有virtual函数的类 ///////////////// ...