最新的Web开发教程
 

HTML canvas putImageData() Method

<HTML画布参考

复制下面的代码与在画布上指定的矩形的像素数据getImageData()然后将图像数据返回到与画布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() 9

定义和用法

putImageData()方法将图像数据(从指定的ImageData对象)放回画布上。

提示:了解getImageData()方法复制像素数据在画布上指定的矩形。

提示:了解createImageData()创建一个新的空白的ImageData对象的方法。


JavaScript语法

JavaScript语法: context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight );

参数值

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

<HTML画布参考