###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. [Redis]Redis的设计与实现-链表/字典/跳跃表

    redis的设计与实现:1.假如有一个用户关系模块,要实现一个共同关注功能,计算出两个用户关注了哪些相同的用户,本质上是计算两个用户关注集合的交集,如果使用关系数据库,需要对两个数据表执行join操作 ...

  2. Maven项目POM文件错误,提示“Plugin execution not covered by lifecycle configuration”的解决方案

    一. 问题 Plugin execution not covered by lifecycle configuration: org.apache.maven.plugins:maven-depend ...

  3. 【20190407】JavaScript-indexOf方法解析

    在JavaScript中,字符串类型String和数组类型Array都有indexOf()方法,虽然他们的作用都是返回传入元素在指定字符串或数组中的位置,但他们之间还是存在着一点点不同. Str.in ...

  4. 轻量级应用程序Dynamics 365 App for Outlook介绍

    摘要: 本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复273或者20180625可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyon ...

  5. 德国慕尼黑.NET俱乐部VS2019发布活动

    就在广州.NET俱乐部紧锣密鼓的准备配合VS2019发布搞一场大Party的时候,德国慕尼黑.NET俱乐部早就已经对外宣布他们将会配合VS2019发布搞两场活动,注意,是两场哦,不是一场哦. 第一场是 ...

  6. iOS----------developerDiskImage

    真机测试时提示Could not find Developer Disk Image.这该怎么办???? 这是由于真机系统过高或者过低,Xcode中没有匹配的配置包文件,我们可以通过这个路径进入配置包 ...

  7. 如何把activity当成dialog

    在工作中有时候需要把activity当成dialog使用,其实做法挺简单的. 1.设置activity的style <style name="DialogTheme" par ...

  8. Android远程桌面助手扩展之微信跳一跳辅助

    微信跳一跳的外挂辅助已是五花八门,万能的TB上也有了各种明码标价的代练.微信小程序游戏的火爆甚至带火了手游外挂产业.另一方面,跳一跳游戏也在不断更新,防止使用外挂刷高分.Android远程桌面助手支持 ...

  9. leetcode-48.旋转图像

    leetcode-48.旋转图像 point: 数组 题意 给定一个 n × n 的二维矩阵表示一个图像. 将图像顺时针旋转 90 度. 说明: 你必须在原地旋转图像,这意味着你需要直接修改输入的二维 ...

  10. SpringBoot 配置 跨域支持

    跨域资源共享(CORS,请求协议,请求地址,请求端口三者必须相同才是同一服务器,否则都要进行跨域操作)标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站有权限访问哪些资源.另外,规范要求,对那 ...