zoukankan      html  css  js  c++  java
  • h5-canvas 像素操作

    ###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新对象额高度

      默认创建出来的是透明的

  • 相关阅读:
    结对四则运算04—网页版
    每周总结07
    每周总结06
    求循环数组中最大子数组的和
    每周总结05
    每周总结03
    每周总结04
    四则运算03
    开发过程记录
    Ubuntu下安装mysql和可视化工具超级简单教程
  • 原文地址:https://www.cnblogs.com/john-hwd/p/10566142.html
Copyright © 2011-2022 走看看