###在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. There was an unexpected error (type=Method Not Allowed, status=405). Request method 'POST' not supported

    背景:点击提交按钮ajax请求接口时,报出错误[ Whitelabel Error Page This application has no explicit mapping for /error, ...

  2. span里面插入文字

    .text-box span::before{   content:attr(data-text);}

  3. JS获取CkEditor在线编辑的内容

    参考博文:[实践]获取CKEditor的html文本.纯文本.被选中的内容及赋值 1.获取CKEditor被选中的内容 var mySelection = CKEDITOR.instances.WOR ...

  4. python_django__验证码

    验证码:在用户注册/登陆时使用,为了防止暴力请求,减轻服务器压力,也是防止csrf的一种方式. 运行环境:python django 对应template模块htm函数: 登陆页面: <!DOC ...

  5. git基础1

    git:     团队协作开发     版本管理      创建项目的文档     初始化   编写项目   把文件add到git仓库,其实是放到了git的代码暂存区   工作区有一个隐藏目录 .gi ...

  6. 视频质量评测标准——VMAF

    阿里云视频云直播转码每天都会处理大量的不同场景.不同编码格式的直播流.为了保证高画质,团队借助VMAF标准来对每路转码的效果做质量评估,然后进行反馈.调优.迭代.这么做的原因在于,像动作片.纪录片.动 ...

  7. php面向对象深入理解（二）

    一个简单的小程序:   配置 config.ini <?php //项目的根目录 define("ROOT","F:/文件夹的名字/oop/"); //数 ...

  8. 概率期望+闭包+bitset优化——hdu5036

    我们首先得到:     暴力打开这个箱子,能够开那些箱子.这个可以用bitset来进行状态压缩. 用闭包传递来解决这一步     然后,对于每个箱子,我们考虑有多少种方法,使:暴力打开某些箱子,同时能 ...

  9. 约数个数求和+线性筛约数——bzoj3994

    这题首先要会线性筛约数个数,并求出前缀和 bool vis[maxn]; int mm,mu[maxn],prime[maxn],num[maxn],sum[maxn],d[maxn],sum1[ma ...

  10. 一次Spring Transactional嵌套事务使用不同的rollbackFor的分析

    起因: 项目期间由于一次异常回滚问题,发现自己在事务知识方面知识的遗漏,趁着这次机会,做了几次rollbackFor的测试. 测试:   现在有两个事务,事务oute包含事务Inner.事务A回滚规则 ...