###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. Linq实现左连接、右连接

    --一本错误的记录 insert into Book values('错误时怎样练成的',111)   --左连接 select s.name,b.name from student as s lef ...

  2. static 静态与非静态的区别

    静态属性是共享一块内存空间.实例的是各自独享一块内存空间. 比如同一个name属性.如果是实例成员.那么你每创建了一个对象.赋给name值.假如创建了2个对象.第一个赋值张三.第2个赋值李四.它们就分 ...

  3. Kotlin for循环使用

    普通for循环 for(i in 1..4){ println(i) } 结果为1234 循环四次 反序for循环 for(i in 4 downTo 1){ println(i) } 结果为4321 ...

  4. 广州.NET微软技术俱乐部微信群各位技术大牛的blog

    1. .net core和微服务领域的张善友张队长和马洪喜,证明了.net core和微服务已经在各方面都不比java差2. Xamarin的卢建晖,证明了.net在移动开发领域也是很牛的.3. wi ...

  5. 日志管理工具之logrotate

    Logrotate配置和测试 logrotate软件是一个日志管理工具,用于非分隔日志,删除旧的日志文件,并创建新的日志文件,起到“转储作用”,可以为系统节省磁盘空间.logrotate是基于cron ...

  6. Python IO编程

    IO在计算机中指Input/Output,也就是输入和输出 一.文件读写 1.读文件 >>> f = open('/Users/michael/test.txt', 'r') --- ...

  7. 章节九、1-Selenium环境配置

    一.Selenium环境安装配置,这里使用Selenium WebDriver 3.6.0 1.下载Selenium WebDriver (点击后网站响应比较慢,需要多等等) 2.打开该网址后点击“d ...

  8. FPGA配置OV5640摄像头及RGB图像数据采集

    本文设计思想采用明德扬至简设计法.在做摄像头数据采集处理之前,需要配置OV5640传感器内部寄存器使其按要求正常工作,详细内容请参见<OV5640自动对焦照相模组应用指南>.首先要关注OV ...

  9. Thinkphp volist 多重循环原样输出数组key值的使用总结

    最近因为项目的缘故,要使用到volist.在这个过程中,遇到了一些小问题,主要就是volist在循环输出多重数据的时候,如何输出key.网上查阅了不少资料,很失望的是,大多资料就是粘贴复制Thinkp ...

  10. Vue学习之路1-集成环境安装

    1.前言 Vue 是一款友好的.多用途且高性能的javascript框架,与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用,它能够帮你创建可维护性和可测试性更强的代码库,Vue是渐进式的j ...