###1. 自定义获取指定坐标像素

  var canvas = document.querySelector("#cav");

  if(canvas.getContext){

    var ctx= canvas.getContext("2d");

    ctx.fillRect(100,100,200,200)

    var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);

    var color = getColor(imageData,50,50);

    console.log(color);

    function getColor(imageData,x,y){

      var data = imageData.data;

      var w = imageData.width;

      var color = [];

      color[0] = data[4*(x*w+y)];   //  R

      // 例如:(1,2)该点有y*w行   +  x 个像素  即 2*2+1=5

       color[1] = data[4*(y*w+x)+1];   // G

      color[2] = data[4*(y*w+x)+2];    //  B

      color[3] = data[4*(y*w+x)+3];    //   A    

      return color;

    }

  }

注意:css定义的是canvas背景颜色,使用getImageData获取的是canvas画布上的元素信息,默认为黑色透明

  

h5-canvas 单像素操作的更多相关文章

  1. HTML5 canvas图像绘制方法与像素操作属性和方法

    图像绘制方法 drawImage()        向画布上绘制图像.画布或视频 像素操作属性和方法 width                                返回 ImageData ...

  2. canvas上的像素操作(图像复制,细调)

    canvas上的像素操作(图像复制,细调) 总结 1.操作对象:ImageData 对象,其实是canvas的像素点集合 2.主要操作: var obj=ctx.getImageData(0,0,10 ...

  3. 【canvas学习笔记八】像素操作

    ImageData对象 ImageData对象包含了一个区域内的canvas的像素信息.它包含以下可读属性: width canvas的宽度,单位是像素. height canvas的高度,单位是像素 ...

  4. canvas像素操作

    像素操作 相关方法:getImageData(x,y,w,h);  putImageData(oImg,x,y);  createImageData(w,h); 1.getImageData(x,y, ...

  5. h5 canvas 小球移动

    h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  6. h5 canvas 画图

    h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  7. 【转】android Graphics(四):canvas变换与操作

    android Graphics(四):canvas变换与操作 分类: 5.andriod开发2014-09-05 15:05 5877人阅读 评论(18) 收藏 举报   目录(?)[+]   前言 ...

  8. android Graphics(四):canvas变换与操作

    前言:前几篇讲解了有关canvas绘图的一些操作,今天更深入一些,讲讲对画布的操作,这篇文章不像前几篇那么容易理解,如果以前没有接触过画布的童鞋可能比较难以理解,为什么会这样.我尽量多画图,让大家更清 ...

  9. Android Bitmap 载入与像素操作

    Android Bitmap 载入与像素操作 一:载入与像素读写 在Android SDK中,图像的像素读写能够通过getPixel与setPixel两个Bitmap的API实现. Bitmap AP ...

随机推荐

  1. Sql Server 查询外键对应的Table 的通用方法

    SELECT oSub.name AS [子表名称] , fk.name AS [外键名称] , SubCol.name AS [子表列名] , oMain.name AS [主表名称] , Main ...

  2. 杭电ACM2015--偶数求和

    偶数求和 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  3. python之编码与解码

    编码 字符串被当作url提交时会被自动进行url编码处理,在python里也有个urllib.urlencode的方法,可以很方便的把字典形式的参数进行url编码.当url地址含有中文或者“/”的时候 ...

  4. PHP中的Define和Const区别

    我们经常把不经常变的值定义成常量,常量一般用全部大写来表示,前面不加美元符号,那么define和const有什么区别呢? 常量是一个简单的标识符.在脚本执行期间该值不能改变(除了所谓的魔术常量,他们其 ...

  5. Java Calendar类的使用总结

    在实际项目当中,我们经常会涉及到对时间的处理,例如登陆网站,我们会看到网站首页显示XXX,欢迎您!今天是XXXX年....某些网站会记录下用户登陆的时间,比如银行的一些网站,对于这些经常需要处理的问题 ...

  6. Java开发笔记(六十四)静态方法引用和实例方法引用

    前面介绍了方法引用的概念及其业务场景,虽然在所列举的案例之中方法引用确实好用,但是显而易见这些案例的适用场合非常狭窄,因为被引用的方法必须属于外层匿名方法(即Lambda表达式)的数据类型,像isEm ...

  7. Selenium自动化 Xpath-元素定位

    最近在教妹子做自动化测试,妹子基础差,于是想到很多初学自动化的朋友们学习的知识没有规范化,信息太过杂乱.所以,本文整理了一些自动化元素定位方式: 这次将讲Xpath定位! 什么是Xpath: Path ...

  8. MongoDB:数据库介绍与基础操作

    二.部署在本地服务器 在上次的学习过程中,我们主要进行了MongoDB运行环境的搭建和可视化工具的安装.此次我们将学习MongoDB有关的基本概念和在adminmongo上的基本操作.该文档中的数据库 ...

  9. Linux查看分区文件系统类型总结

    在Linux 中如何查看分区的文件系统类型,下面总结几种查看分区文件系统类型的方法. 1: df -T 命令查看 这个是最简单的命令,文件系统类型在Type列输出.只可以查看已经挂载的分区和文件系统类 ...

  10. SQLServer之删除函数

    删除函数注意事项 从当前数据库中删除一个或多个用户定义函数.DROP 函数支持本机编译的标量用户定义函数. 如果数据库中存在引用 DROP FUNCTION 的 Transact-SQL 函数或视图并 ...