###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. Unity的四元素与Vector3的乘积的含义

    Quaternion.Euler(x,y,z)含义是按照每个旋转轴以x,y,z旋转度旋转,例子:Quaternion.Euler(45,45,45) Quaternion与Vector3的右乘操作(* ...

  2. Java与.net的选择和比较

    跨平台对开发商是一个巨大的诱惑.一次开发,多个平台使用,降低了迁移成本,有利.但Java的开发工具没有.net顺手,对编码人员的要求比.net要高. .net培训成本低,上手快.尤其如果开发人员以前都 ...

  3. Node.js面试题之2017

    译者按: 从ECMAScript标准,Node.js语法以及NPM模块角度来看,Node.js的发展让人目不暇接,那么面试题也得与时俱进. 原文: Node.js Interview Question ...

  4. 微信小程序基本目录结构学习

    今天我们就以firstdemo为例,介绍一下小程序的基本目录结构.当我们打开一个微信小程序项目后,点击进入“编辑”菜单,我们可以看到有以下5个文件/文件夹):pages文件夹,utils文件夹,全局文 ...

  5. Spring MVC 响应视图(六)

    完整的项目案例: springmvc.zip 目录 实例 除了依赖spring-webmvc还需要依赖jackson-databind(用于转换json数据格式) <dependency> ...

  6. A Deep Learning-Based System for Vulnerability Detection(二)

    接着上一篇,这篇研究实验和结果. A.用于评估漏洞检测系统的指标 TP:为正确检测到漏洞的样本数量 FP:为检测到虚假漏洞样本的数量(误报) FN:为未检真实漏洞的样本数量(漏报) TN:未检测到漏洞 ...

  7. python 词云学习

    词云入门 三步曲 数据获取:使用爬虫在相关网站上获取文本内容 数据清洗:按一定格式对文本数据进行清洗和提取(文本分类,贴标签) 数据呈现:多维度呈现和解读数据(计算,做表,画图) 一 模块的安装 pi ...

  8. Get https://registry-1.docker.io/v2/: net/http: request canceled while waiting for connection (Clien

    https://blog.csdn.net/asahinokawa/article/details/84746422

  9. Luogu P5296 [北京省选集训2019]生成树计数

    Luogu P5296 [北京省选集训2019]生成树计数 题目链接 题目大意:给定每条边的边权.一颗生成树的权值为边权和的\(k\)次方.求出所有生成树的权值和. 我们列出答案的式子: 设\(E\) ...

  10. Loj #3056. 「HNOI2019」多边形

    Loj #3056. 「HNOI2019」多边形 小 R 与小 W 在玩游戏. 他们有一个边数为 \(n\) 的凸多边形,其顶点沿逆时针方向标号依次为 \(1,2,3, \ldots , n\).最开 ...