###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. 局域网内通讯APP

    局域网内通讯APP [应用描述] 局域网内通讯是一款Android平台的实时通讯软件.提供基于无线局域网(WIFI)的实时通讯功能,支持发送文字.语音消息,支持实时语音及视频聊天.无需接入运营商网络, ...

  2. sql 中 联表on 和where

    left join  on 中对表添加的过滤条件 只对右表起作用   左表会完整的呈现出来  要想过滤左表  on 之后用where 进行过滤  不过这样实际上是对量表之后的结果集进行过滤. rint ...

  3. SAP MM盘点流程里如何处理事务代码MI11 Recount过的盘点凭证?

    SAP MM盘点流程里如何处理事务代码MI11 Recount过的盘点凭证? 1, MI01 create a physical inventory document, 2, MI04 to inpu ...

  4. Android开发,关于如何在应用间共享SharedPreference

    开发一个应用,需要用到两个应用A和B之间共享数据的问题,这个数据是个单一的数据,所以就想用SharedPrefernce来进行保存. 使用网上的各种应用间的共享代码,B是读取A的数据,所以代码为: C ...

  5. c/c++ 多线程 thread_local 类型

    多线程 thread_local 类型 thread_local变量是C++ 11新引入的一种存储类型. thread_local关键字修饰的变量具有线程周期(thread duration), 这些 ...

  6. OV摄像头图像采集基础知识总结

    目前FPGA用于图像采集 传输 处理 显示应用越来越多,主要原因是图像处理领域的火热以及FPGA强大的并行处理能力.本文以OV7725为例,对摄像头使用方面的基础知识做个小的总结,为后续做个铺垫. 下 ...

  7. new 和 newInstance 的区别

    初始化一个类,生成一个实例的时候:newInstance() 和 new 有什么区别? 用newInstance与用new是区别的,区别在于创建对象的方式不一样,前者是使用类加载机制,那么为什么会有两 ...

  8. 电脑出现问题如何修复Windows 10

    也许Windows 10无法启动.或者它可能会靴子,但会崩溃很多.在任何一种情况下,您都需要在使用PC之前解决问题.以下是修复Windows 10的几种方法. 方法1:使用Windows启动修复 如果 ...

  9. swoole多端口监听

    今天测试swoole写webserver实现多端口监听.记录下爬过的坑:关于tcp协议监听触发不到receive!!!!! 首先上服务端代码 class Http { /** * 服务实例 * @va ...

  10. python+selenium 输出2种样式的测试报告

    第一种: 1.通过 HTMLTestRunner 模块输出报告 2.下载连接 http://tungwaiyip.info/software/HTMLTestRunner.html 3.将下载好的文件 ...