###在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. SQL Server2012 Offset Fetch子句 分页查询

    在本教程中,将学习如何使用SQL Server OFFSET FETCH子句来限制查询返回的行数.OFFSET和FETCH子句是ORDER BY子句的选项. 它们用于限制查询返回的行数.以下是OFFS ...

  2. 将时间 '2018-08-06T10:00:00.000Z' 格式转化为本地时间

    参考:https://blog.csdn.net/sxf_123456/article/details/81582964 参考模板: from datetime import datetime, ti ...

  3. springMvc框架之Restful风格

    method: @Controller @RequestMapping("/test") public String MyController{ @RequestMapping(& ...

  4. UserCF算法和ItemCF算法的对比

  5. 笔记55 Mybatis快速入门（六）

    相关概念介绍(一) 1.日志 有时候需要打印日志,知道mybatis执行了什么样的SQL语句,以便进行调试.这时,就需要开启日志,而mybatis自身是没有带日志的,使用的都是第三方日志,这里介绍如何 ...

  6. Vue for循环 例子

    demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf- ...

  7. windows 计算器

    calc sin 弧度与角度

  8. SQL Server 中根据字段值查询其所在的表、字段

    DECLARE @what varchar(800)SET @what='123456' --要搜索的字符串   DECLARE @sql varchar(8000)   DECLARE TableC ...

  9. php注册和登陆与数据库的链接

    注册和登陆其实是从一个表中进行提取和写入数据 1.(1)先建立一个注册页面 1 2 3 4 5 6 7 8 9 <body>         <h1>注册页面</h1&g ...

  10. 打造“云边一体化”，时序时空数据库TSDB技术原理深度解密

    本文选自云栖大会下一代云数据库分析专场讲师自修的演讲——<TSDB云边一体化时序时空数据库技术揭秘> 自修 —— 阿里云智能数据库产品事业部高级专家 认识TSDB 第一代时序时空数据处理工 ...