###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. mysql删除重复记录,只保留最大ID的记录(非重复也保留)

    目前网上搜索的删除重复记录,大部分都是where子查询,本人感觉看上去不美观,故亲自手写了一个,如下: delete from mst_sku using mst_sku,(  select dist ...

  2. PHP代码片段

    将数组拼接为 table 标签字符串 <?php //判断是否是图片 function isImage($string){ $isImage = false; $pics = ['.png', ...

  3. 程序员奇谈之我写的程序不可能有bug篇

    程序员在普通人的印象里是一份严(ku)谨(bi)的职业,也是一个被搞怪吐槽乐此不疲的职业,程序员们面对复杂的代码敲打电脑时连眉头都不会皱一下,但是有一个词却是他们痛苦的根源,它就是Bug. 有不少的新 ...

  4. 解决VS2017不连接visual studio emulator for android

      参考: http://blog.csdn.net/allen_xu5320/article/details/47280457   查出IP 直接ADB连上去                

  5. Django的urls.py加载静态资源图片,TypeError: view must be a callable or a list/tuple in the case of include().

    Django的urls.py加载静态资源图片,TypeError: view must be a callable or a list/tuple in the case of include(). ...

  6. Android为TV端助力listview 非常重要的几个属性

    首先是stackFromBottom属性,这只该属性之后你做好的列表就会显示你列表的最下面,值为true和false Android:stackFromBottom="true" ...

  7. 安卓开发:UI组件-图片控件ImageView(使用Glide)和ScrollView

    2.7ImageView 2.7.1插入本地图片 一个图片控件,可以用来显示本地和网络图片. 在首页添加按钮ImageView,指向新页面(步骤与前同,不再详写). activity_image_vi ...

  8. 微信小程序支付证书及SSL证书使用

    小程序使用微信支付包括:电脑管理控制台导入证书->修改代码为搜索证书->授权IIS使用证书->设置TSL加密级别为1.2 描述: 1.通常调用微信生成订单接口的时候,使用的证书都是直 ...

  9. IIS 反向代理到 Apache、Tomcat

    将请求的网址重写重定向到其它网址.当80端口被占用无法同时使用两个Web服务的解决方案,使得IIS和Apache Tomcat 共存 环境 WindowServer 2008 IIS7 Apache ...

  10. JavaScript -- JSON.parse 函数 和 JSON.stringify 函数

    JavaScript -- JSON.parse 函数 和 JSON.stringify 函数 1. JSON.parse 函数: 使用 JSON.parse 可将 JSON 字符串转换成对象. &l ...