HTML canvas(画布) imgData data属性

• 

  data属性定义和用法

  data属性返回包含指定ImageData对象的图像数据的对象。
  对于ImageData对象中的每个像素，有四条信息，即RGBA值：

  • R - 红色（从0到255）
  • G - 绿色（从0到255）
  • B - 蓝色（从0到255）
  • A - Alpha通道（从0到255; 0是透明的，255是完全可见）

  颜色/alpha信息保存在数组中，并存储在ImageData对象的data属性中。
  使ImageData对象中的第一个像素变为红色的语法：
  

  imgData=ctx.createImageData(100,100);
  
                  imgData.data[0]=255;
                  imgData.data[1]=0;
                  imgData.data[2]=0;
                  imgData.data[3]=255;
                  

  使ImageData对象中的第二个像素变为绿色的语法：
  

  imgData=ctx.createImageData(100,100);
  
                  imgData.data[4]=0;
                  imgData.data[5]=255;
                  imgData.data[6]=0;
                  imgData.data[7]=255;
                  

  提示：查看createImageData()， getImageData()和putImageData()以了解有关ImageData对象的更多信息。

• 

  data属性浏览器支持

  Internet Explorer	Chrome	FireFox	Safari	Opera
  9.0（含）以上	支持	支持	支持	支持

• 

  data属性语法

  imgData.data;

• 

  data属性实例

  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var imgData = ctx.createImageData(100, 100);
  
  var i;
  for (i = 0; i < imgData.data.length; i += 4) {
      imgData.data[i+0] = 255;
      imgData.data[i+1] = 0;
      imgData.data[i+2] = 0;
      imgData.data[i+3] = 255;
  }
  
  ctx.putImageData(imgData, 10, 10);
  

  尝试一下
• 

  data属性/返回值

  参数	描述

• 

  data属性相关页面

  HTML教程：HTML脚本

  HTML教程：HTML画布