###在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. CentOS7 网卡配置文件解释

    注:此网卡配置文件摘自CentOS7.4.1708系统 Linux 默认配置网卡的信息 TYPE=Ethernet 网卡类型:以太网 PROXY_METHOD=none 代理方式:关闭状态 BROWS ...

  2. VScode Python no module的解决方法

    在lauch.json中,修改 "env": {}为 "env": {"PYTHONPATH":"${workspaceRoot} ...

  3. 自学Oracle心得

    基本术语: global name         全局数据库名 service name        服务名 SID                    实例名 常用命令: 1.       s ...

  4. Java支持的数据类型有哪些？什么是拆装箱？

    Java中有八种基本数据类型以及引用类型 基本数据类型: byte(1字节),short(2字节),int(4字节),long(8字节),char(2字节),boolean(不确定,取值是true/f ...

  5. 用CSS3制作50个超棒动画效果教程

    这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动.为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如Safari和Chrome这类基于WebKit内核的浏览器 ...

  6. usleep - 睡眠若干微秒

    总览 (SYNOPSIS) usleep [number] 描述 (DESCRIPTION) usleep 睡眠 指定的 微秒数. 缺省值 是 1. 选项 (OPTIONS) --usage 显示 简 ...

  7. jq-demo-拖拽

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. dubbo入门之服务消费

    今天,我们来看看dubbo消费的执行过程 首先,我们都知道dubbo是一个基于netty实现的RPC框架,底层通信是使用netty来实现的.在学习dubbo的时候,或许我们都会有下面的这些疑惑: 1. ...

  9. DataTable转对象Model

    我们经常需要从数据库表中取数,取数是以取DataTable的方式,但是我么希望以对象为单位进行这种操作.即存在把取到的DataTable(数据表)转换为ModelList(对象集合)的需求. 原理稍微 ...

  10. Delphi 时间函数：关于时间精确的几个函数和方法

    //取毫秒级时间精度(方法一): var t1,t2:int64; r1:int64; begin t1:=GetTickCount;//获取开始计数 WINDOWS API sleep(1000); ...