HTML canvas(画布)putImageData()方法

• 

  putImageData()方法定义和用法

  putImageData()方法将图像数据（来自指定的ImageData对象）放回画布上。
  提示：了解putImageData()方法，该方法复制画布上指定矩形的像素数据。
  提示：阅读有关创建新的空白ImageData对象的createImageData()方法。

• 

  putImageData()方法浏览器支持

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

• 

  putImageData()方法语法

  context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

• 

  putImageData()方法实例

  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(10, 10, 50, 50);
  
  function copy() {
      var imgData = ctx.getImageData(10, 10, 50, 50);
      ctx.putImageData(imgData, 10, 70);
  }
  

  尝试一下
• 

  putImageData()方法参数值

  参数	描述
  imgData	指定要放回画布上的ImageData对象
  x	ImageData对象左上角的x坐标(以像素为单位)
  y	ImageData对象左上角的y坐标，以像素为单位
  dirtyX	可选的。水平(x)值，以像素为单位，用于在画布上放置图像
  dirtyY	可选的。垂直(y)值，以像素为单位，在画布上放置图像的位置
  dirtyWidth	可选的。用于在画布上绘制图像的宽度
  dirtyHeight	可选的。用于在画布上绘制图像的高度

• 

  putImageData()方法相关页面

  HTML教程：HTML脚本

  HTML教程：HTML画布