HTML canvas(画布)createImageData()方法

• 

  createImageData()方法定义和用法

  createImageData()方法创建一个新的空白ImageData对象。默认情况下，新对象的像素值为透明黑色。
  对于ImageData对象中的每个像素，有四条信息，即RGBA值：

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

  因此，透明的黑色表示：（0,0,0,0）。
  颜色/alpha信息保存在一个数组中，由于数组包含每个像素的4条信息，因此数组的大小是ImageData对象大小的4倍：width * height * 4。（查找数组大小的更简单方法是使用ImageDataObject.data.length）
  包含颜色/alpha信息的数组存储在ImageData对象的data属性中。
  提示：在操作数组中的颜色/alpha信息后，可以使用putImageData()方法将图像数据复制回画布 。
  例子：
  使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()方法浏览器支持

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

• 

  createImageData()方法语法

  1.这将创建一个具有指定尺寸（以像素为单位）的新ImageData对象：

  var imgData=context.createImageData(width,height);

  2.这将创建一个新的ImageData对象，其尺寸与anotherImageData指定的对象相同（这不会复制图像数据）：

  var imgData=context.createImageData(imageData);

• 

  createImageData()方法实例

  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);
  

  尝试一下
• 

  createImageData()方法参数值

  参数	描述
  width	新ImageData对象的宽度，以像素为单位
  height	新ImageData对象的高度，以像素为单位
  imageData	anotherImageData对象

• 

  createImageData()方法相关页面

  HTML教程：HTML脚本

  HTML教程：HTML画布