###在canvas中的像素操作
到目前为止，我们尚未深入了解Canvas画布真实像素的原理，事实上，

你可以直接通过ImageData对象操纵像素数据，直接读取或将数据数组写入该对象中

###得到场景像素数据
getImageData():获得一个包含画布场景像素数据的ImageData对像,它代表了画布区域的对象数据

ctx.getImageData(sx, sy, sw, sh)
sx:将要被提取的图像数据矩形区域的左上角 x 坐标。
sy:将要被提取的图像数据矩形区域的左上角 y 坐标。
sw:将要被提取的图像数据矩形区域的宽度。
sh:将要被提取的图像数据矩形区域的高度。

var imageData=ctx.getImageData(,,,);
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

         html,body{

                height: %;

                overflow: hidden;

            }

            body{

                background: greenyellow;

            }

          #test{

               position: absolute;

               top: ;

               left: ;

               right: ;

               bottom:;

               margin: auto;

           background: gray;

          }

        </style>

    </head>

    <body>

        <canvas id="test" width="" height="">

            <span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>

        </canvas>

    </body>

     <script type="text/javascript">

        window.onload=function(){

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

        if(canvas.getContext){

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

            ctx.fillStyle="rgba(255,192,203,1)";

            ctx.fillRect(, , , );

            var imageData=ctx.getImageData(,,,);

            for(var i=; i<imageData.data.length;i++){

                imageData.data[*i+]=;

            }

            ctx.putImageData(imageData,,)

        }

     }

    </script>

</html>

###ImageData对象
ImageData对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性：
width:图片宽度，单位是像素
height:图片高度，单位是像素
data:Uint8ClampedArray类型的一维数组，
包含着RGBA格式的整型数据，范围在0至255之间（包括255）
R:0 --> 255(黑色到白色)
G:0 --> 255(黑色到白色)
B:0 --> 255(黑色到白色)
A:0 --> 255(透明到不透明)

###在场景中写入像素数据
putImageData()方法去对场景进行像素数据的写入。
putImageData(myImageData, dx, dy)
dx和dy参数表示你希望在场景内左上角绘制的像素数据所得到的设备坐标

ctx.putImageData(imageData,,)

###创建一个ImageData对象
ctx.createImageData(width, height);
width : ImageData 新对象的宽度。
height: ImageData 新对象的高度。

var imageData=ctx.createImageData(,);

默认创建出来的是透明的

###操作单个像素（行与列）

###马赛克

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

         html,body{

                height: %;

                overflow: hidden;

            }

            body{

                background: greenyellow;

            }

          #test{

               position: absolute;

               top: ;

               left: ;

               right: ;

               bottom:;

               margin: auto;

           background: gray;

          }

        </style>

    </head>

    <body>

        <canvas id="test" width="" height="">

            <span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>

        </canvas>

    </body>

     <script type="text/javascript">

        window.onload=function(){

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

        if(canvas.getContext){

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

    //默认创建出来的是透明的

   var imageData=ctx.createImageData(,);

  for(var i=; i<imageData.data.length;i++){  

  imageData.data[*i+]=;

  }

  ctx.putImageData(imageData,,)

        }

     }

    </script>

</html>

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

  1. 【转】android Graphics（四）：canvas变换与操作

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

  2. android Graphics（四）：canvas变换与操作

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

  3. Canvas链式操作

        Canvas 链式操作 canvas有个非常麻烦的地方就是不支持链式操作,导致书写极其繁琐,刚刚学习了canvas的链式操作. 下面是代码 改进之后的写法,犀利得多啊! 1.canvas = ...

  4. 安卓自定义View进阶-Canvas之画布操作 转载

    安卓自定义View进阶-Canvas之画布操作 转载 https://www.gcssloop.com/customview/Canvas_Convert 本来想把画布操作放到后面部分的,但是发现很多 ...

  5. canvas像素操作

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

  6. Canvas的效果操作及save（）和restore（）方法应用

    平移.缩放.旋转等操作等于是,我在一个正的画布绘制好图,然后再把画布做旋转.平移.缩放等等的效果. 也就是说,我使用的X.Y坐标还是正常的坐标(没旋转.平移.缩放等之前的坐标). save()和res ...

  7. 理解Canvas像素边界

    大家看下面的例子 var context = document.getElementById('canvas').getContext('2d'); context.lineWidth = 1; co ...

  8. Android Canvas之Path操作

    接上篇,Android自己定义View工具:Paint&Canvas(二) 上一篇中介绍的Canvas绘制图形仅仅能画一些常规图形(圆.椭圆.矩形等),假设想绘制更复杂的图形.Path神器来了 ...

  9. canvas动画简单操作

    canvas动画 小球滚动效果 关键api: window.requestAnimationFrame(draw) 会递归调用draw函数,替代setInterval var x = 20; var ...

随机推荐

  1. python接口自动化（put请求）

    python接口自动化(put请求) 一.put请求的作用:更新资源 二.应用 导包:import requests 调用requests.put()方法 参数有URL.data.headers,方法 ...

  2. MySQL 小调研

    一. 概况: MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL ...

  3. centos7 sshd 安全设置

    ssh 的安全机制 1.SSH之所以能够保证安全,原因在于它采用了非对称加密技术(RSA)加密了所有传输的数据.   2.传统的网络服务程序,如FTP等在网络上用明文传送数据.用户帐号和用户口令,很容 ...

  4. 【模板篇】Link Cut Tree模板(指针)

    网上一片一片的LCT都是数组写的 orz 用指针写splay的人想用指针写LCT找板子都不好找QAQ 所以能A题了之后自然要来回报社会, 把自己的板子丢上来(然而根本没有人会看) LCT讲解就省省吧, ...

  5. 固定Linux虚拟IP地址

    由于我的开发环境是在VMWare虚拟机里安装Centos,然后在host文件中设置拦截,这样就可以直接跳转虚拟机的CentOS,但是虚拟机的IP地址总是会变,就要随时修改host文件,很麻烦.决定虚拟 ...

  6. 转载-------- JSON 与 对象 、集合 之间的转换 JSON字符串和java对象的互转【json-lib】

    转载--*--*---- 在开发过程中,经常需要和别的系统交换数据,数据交换的格式有XML.JSON等,JSON作为一个轻量级的数据格式比xml效率要高,XML需要很多的标签,这无疑占据了网络流量,J ...

  7. 49. ArrayList LinkedList中特有的方法

    集合的体系:--------------| Collection  单列集合的根接口 ----------| List 如果实现了List接口的集合类,该类具备的特点是:有序,可重复 ------|A ...

  8. Linux下可以运行bat文件么？

    bat是批处理文件,在windows和linux上都可以使用. 不过在linux的命令行中不可以直接敲"xxx.bat",系统会去找所有的命令. 想要调用bat文件,需要写绝对路径 ...

  9. twentytwenty插件，图片对比轮播

    https://zurb.com/playground/twentytwenty 项目应用 http://decortrim.mml.digital/

  10. 干货满满！解密阿里云RPA （机器人流程自动化）的产品架构和商业化发展

    阿里云RPA,作为阿里云自研8年的技术,在资本的热捧下,逐渐从幕后来到台前,成为企业服务市场的黑马.本文将从产品上全面剖析,阿里云RPA这款产品的现阶段情况,同时简单谈谈阿里云RPA的商业化进展. 阿 ...