###1.得到场景像素数据

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

    ctx.getImageData(sx,sy,sw,sh)

      sx ( sy): 将要被提取的像素数据矩形区域的左上角x (y) 坐标

      sw (sh): 将要被提取的像素数据矩形区域的宽度 ( 高度)

###2.ImageData对象

  ImageData对象中存储着canvas对象的真实像素数据,包含以下几个只读属性:

    width:图片宽度,单位是像素

    height:图片高度,单位是像素

    data:Uint8ClampedArray类型的一维数组,

      包含着RGBA格式的整型数据,范围在0至255之间(包含255)

        R、G、B、A的值都为0-255    R、G、B指黑色到白色   A指透明到不透明  (都由0-255逐渐改变)

###3.在场景中写入像素数据

  putImageData()方法去对场景进行像素数据的写入

  putImageData(myImageData, dx, dy)

    dx和dy参数表示你希望在场景内的左上角绘制的像素数据所得到的设备坐标

      eg:   设置透明度

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

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

          imageData.data[4*i+3] = 100;     //设置该对象的A为100透明度

        }

        ctx.putImageData(imageData,0,0);    // 将修改后的对象写入进场景中

###4.创建一个ImageData对象

  createImageData(width,height)

    width:   ImageData新对象的宽度

    height:    ImageData新对象额高度

  默认创建出来的是透明的

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

  1. canvas像素操作

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

  2. HTML5_canvas_像素操作_图片马赛克_图片反相

    canvas 像素操作 像素,即像素点,一个像素只有一个颜色 100*100 的 px 的屏幕区域有 100*100*4 个像素点,即 width*height*4 rgba(0, 0, 0, 1); ...

  3. HTML5 canvas图像绘制方法与像素操作属性和方法

    图像绘制方法 drawImage()        向画布上绘制图像.画布或视频 像素操作属性和方法 width                                返回 ImageData ...

  4. canvas上的像素操作(图像复制,细调)

    canvas上的像素操作(图像复制,细调) 总结 1.操作对象:ImageData 对象,其实是canvas的像素点集合 2.主要操作: var obj=ctx.getImageData(0,0,10 ...

  5. canvas像素的操作

    ###在canvas中的像素操作 到目前为止,我们尚未深入了解Canvas画布真实像素的原理,事实上, 你可以直接通过ImageData对象操纵像素数据,直接读取或将数据数组写入该对象中 ###得到场 ...

  6. h5 canvas 小球移动

    h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  7. h5 canvas 画图

    h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  8. Android Bitmap 载入与像素操作

    Android Bitmap 载入与像素操作 一:载入与像素读写 在Android SDK中,图像的像素读写能够通过getPixel与setPixel两个Bitmap的API实现. Bitmap AP ...

  9. H5 canvas的 width、height 与style中宽高的区别

    Canvas 的width height属性 1.当使用width height属性时,显示正常不会被拉伸:如下 <canvas id="mycanvas" width=&q ...

  10. H5 canvas绘制出现模糊的问题

    在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...

随机推荐

  1. 【CentOS7】服务环境搭建

    用了两天时间,完成了服务环境的搭建.记录下了搭建的过程,搭建细节并没有记录. 1.OpenSSH. (1)yum search ssh (2)yum install openssh-server (3 ...

  2. JavaWeb学习日记----SAX解析XML

    1.SAX解析XML文档的方式: 与DOM方式解析不同,DOM方式解析是根据XML的层级结构在内存中分配一个树形结构,把xml的标签,属性和文本都封装成对象.优点是可以很方便实现增删改操作.缺点是,如 ...

  3. Activiti(二) springBoot2集成activiti,集成activiti在线设计器

    摘要 本篇随笔主要记录springBoot2集成activiti流程引擎,并且嵌入activiti的在线设计器,可以通过浏览器直接编辑出我们需要的流程,不需要通过eclipse或者IDEA的actiB ...

  4. js实现消息滚动效果

    <div class="inform" style=""> <div style="height:35px; overflow:hi ...

  5. MySql中存储过程中的@变量总是无法执行,提示Parameter '@XXX' must be defined

    一.情形: 在.net调用Mysql时,比如如下的一句SQL,总是无法执行,可是在其它SQL客户端窗口中是能正确执行的. drop procedure if exists AddColumnUnles ...

  6. 下载Dynamics 365 Customer Engagement 工具

    微软动态CRM专家罗勇 ,回复312或者20190311可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 从Dynamics ...

  7. 43.Odoo产品分析 (四) – 工具板块(11) – 网站即时聊天(1)

    查看Odoo产品分析系列--目录 在线聊天可以实现与顾客的在线实时交流,比如在"商店"功能中实现顾客对客服的商品咨询等类似的操作.  安装"网站即时聊天"模块: ...

  8. MongoDB 聚合分组取第一条记录的案例及实现

    关键字:MongoDB: aggregate:forEach 今天开发同学向我们提了一个紧急的需求,从集合mt_resources_access_log中,根据字段refererDomain分组,取分 ...

  9. .net向文件写入字符串流内存溢出的问题

    字符串过大导致抛出异常: exceptopm of type 'system.outOfmemoryexception' was thrown 解决方法:逐块写入可以避免这个问题

  10. linux 网络套接字

    在内核分析网络分组时,底层协议的数据将传输到跟高的层.而发送数据的时候顺序是相反的.每一层都是通过加(首部+净荷)传向跟底层,直至最终发送. 这些操作决定了网络的的性能. 就如下图所示 linux因此 ...