###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. MEF 基础简介 三

    MEF导出类的方法和属性 首先来说导出属性,因为这个比较简单,和导出类差不多,先来看看代码,主要看我加注释的地方,MusicBook.cs中的代码如下: using System; using Sys ...

  2. Java开发笔记(二十四)方法的组成形式

    经过前面的学习,我们发现演示的Java代码越来越复杂,而且每个例子的代码都堆在入口方法main内部,这会导致如下问题:1.一个方法内部堆砌了太多的代码行,看着费神,维护起来也吃力:2.部分代码描述的是 ...

  3. 【Java千问】你了解代理模式吗?

    代理模式详解 1 什么是代理模式? 一句话描述:代理模式是一种使用代理对象来执行目标对象的方法并在代理对象中增强目标对象方法的一种设计模式. 详细描述: 1.理论基础-代理模式是设计原则中的“开闭原则 ...

  4. CSS3背景,渐变

    1,有利于代码维护,有利于使用debug进行调试打断点.2,后面三个都存在计算,所以分开写最好.背景复合属性最好的写法,background:#abcdef url() no-repeat 50px ...

  5. jsp基础语言-jsp注释

    JSP注释可分为客户端注释和服务器端注释. 客户端注释:用户可通过浏览器中的源代码查看,且这种注释可以加入JSP表达式. 语法:<!-- 客户端注释[<%=表达式%>] --> ...

  6. C++语法小技巧

    前言 写的很乱,各种内容都有.仅仅是为了记录一下 而且内容极其不严谨(没错,只有实践,没有理论)!请各位谨慎驾驶! 强制内联 #define Inline __inline__ __attribute ...

  7. JS、CSS中的相对路径

    css中url(../images/1.jpg)路径是相对于index.css的 js中url(images/1.jpg)路径是相对于index.html的,并不是相对于index.js

  8. 关于如何使用xposed来hook某支付软件

    由于近期有业务上的需要,所以特地花时间去研究了一下如何使用hook技术.但是当我把xposed环境和程序编写完成时,突然发现手机上的某个支付软件无法使用了.这个时候我意识到,应该是该软件的安全机制在起 ...

  9. python(day16)内置函数,匿名函数

    # add = lambda x,y:x+y # print(add(1,2)) # dic={'k1':10,'k2':100,'k3':30} # def func(key): # return ...

  10. Kubernetes 集群日志管理 - 每天5分钟玩转 Docker 容器技术(180)

    Kubernetes 开发了一个 Elasticsearch 附加组件来实现集群的日志管理.这是一个 Elasticsearch.Fluentd 和 Kibana 的组合.Elasticsearch ...