###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. Oracle 11g设置IP访问限制

    出于数据安全考虑,对Oracle数据库的IP做一些限制,只有固定的IP才能访问. 修改$ORACLE_HOME/network/ADMIN/sqlnet.ora文件 增加以下内容(红色表示注释): # ...

  2. SpringMVC页面向Controller传参

    关于SpringMVC页面向Controller传参的问题,看了网上不少帖子,大多总结为以下几类: 1.直接把页面表单中相关元素的name属性对应的值作为Controller方法中的形参. 这个应该是 ...

  3. 【Docker】基础学习及在.Net Core应用

    一.Docker基础 Docker 是一个开源的应用容器引擎,基于 Go 语言 Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的 Linux 机器上 ...

  4. zookeeper配置记录

    1. 准备三台机器,系统CentOS6 2. 将JDK和zookeeper安装包解压到目录 tar -zxvf jdk1.8.0_181-linux-x64.tar.gz -C /javatools ...

  5. Centos7.3安装和配置Mysql5.7

    主要转自这篇文章:https://www.cnblogs.com/wishwzp/p/7113403.html 这篇文章已经讲的很详细,亲测可用,对于基本不懂linux的小白应该也能看得懂.只是没有修 ...

  6. 前端入门13-JavaScript进阶之原型

    声明 本系列文章内容全部梳理自以下几个来源: <JavaScript权威指南> MDN web docs Github:smyhvae/web Github:goddyZhao/Trans ...

  7. mac下 将python2.7改为python3

    1.查看当前电脑python版本 python -V // 显示2.7.x 2.用brew升级python brew update python 3.如果安装成功,去系统目录下回看到两个版本的pyth ...

  8. 无依赖简单易用的Dynamics 365公共视图克隆工具

    本人微信公众号:微软动态CRM专家罗勇 ,回复279或者20180818可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . Dy ...

  9. 谷歌AI涉足艺术、太空、外科手术,再强调AI七原则

    谷歌AI涉足艺术.太空.外科手术,再强调AI七原则 https://mp.weixin.qq.com/s/MJG_SvKCEBKRvL3IWpL0bA 9月18日上午,Google在上海的2018世界 ...

  10. EditText超出字数限制,给用户提示

    当我们在Editext输入内容的时候,检测如果超过限制的长度无法输入内容,并且给用户提示. 首先我想到了下面的方法: editText.addTextChangedListener(new TextW ...