###在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. mysql-python不支持python3

    使用Mysqlclient pip3 install Mysqlclient

  2. 用redis实现悲观锁（后端语言以php为例）

    1479 锁机制 通常使用的锁分为乐观锁,悲观锁这两种,简单介绍下这两种锁,作为本文的背景知识,对这类知识已经有足够了解的同学可以跳过这部分. 乐观锁 先来看下百度百科上的解释:大多是基于数据版本( ...

  3. style优先级

    不同级别 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. 作为style属性写在元素内的样式 id选择器 类选择器 标签选择器 通配符选择器 浏览器自定义或继承       ...

  4. 【单调队列优化】[CF372C] Watching Fireworks is Fun

    突然发现我可能单调队列都打不来了...我太菜了... 这道题显然有$$f[i][j]=min\{f[i-1][k]+\vert j-a[i] \vert\}$$ 则$ans=\sum_{i=1}^{m ...

  5. day03 mysql外键 表的三种关系 单表查询 navicat

    day03 mysql navicat   一.完整性约束之     外键 foreign key     一个表(关联表: 是从表)设置了外键字段的值, 对应的是另一个表的一条记录(被关联表: 是主 ...

  6. Java中的反射该如何使用？

    1. 什么是反射 反射是一种功能强大且复杂的机制.Java反射说的是在运行状态中,对于任何一个类,我们都能够知道这个类有哪些方法和属性.对于任何一个对象,我们都能够对它的方法和属性进行调用.我们把这种 ...

  7. DataTable转对象Model

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

  8. leetcode-263-丑数一

    题目描述: 方法一:递归 class Solution: def isUgly(self, num: int) -> bool: if num == 0: return False if num ...

  9. 【代码工具】Lombok来优雅的编码

    前言 Lombok 是一种 Java™ 实用工具,可用来帮助开发人员消除 Java 的冗长,尤其是对于简单的 Java 对象(POJO).它通过注解实现这一目的. 正文 添加依赖 在 pom.xml ...

  10. thinkphp模块设计

    3.2发布版本自带了一个应用目录结构,并且带了一个默认的应用入口文件,方便部署和测试,默认的应用目录是Application(实际部署过程中可以随意设置). 通常情况下3.2无需使用多应用模式,因为大 ...