HTML Referenzhandbuch

Vollständiges Verzeichnis der HTML-Tags

HTML canvas putImageData() Methode

putImageData() 是 Canvas 2D API 将数据从已有的 ImageData 对象绘制到位图的方法。如果提供了一个绘制过的矩形，则只绘制该矩形的像素。此方法不受画布转换矩阵的影响。

在线示例

下面的代码使用getImageData()复制画布上指定矩形的像素数据，然后使用putImageData()将图像数据放回画布上：

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas getImageData()方法使用-基础教程(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 标签。
</canvas>
<script>
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);
}
</script>
<button onclick="copy()">复制</button>
</body>
</html>

测试看看 ‹/›

浏览器兼容性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 putImageData() 方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

putImageData() 方法将图像数据（来自指定的ImageData对象）放回到画布上。

Hinweis:Siehe auch getImageData() 一种方法，它可以复制画布上指定矩形的像素数据。

Hinweis:Siehe auch createImageData() Eine Methode, die ein neues leeres ImageData-Objekt erstellt.

JavaScript Syntax

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

Parameterwert

Parameter	Beschreibung
imgData	Das ImageData-Objekt, das in den Canvas zurückgegeben werden soll.
x	x-Koordinate der linken oberen Ecke des ImageData-Objekts, in Pixel.
y	y-Koordinate der linken oberen Ecke des ImageData-Objekts, in Pixel.
dirtyX	Optional. Horizontale Position (x), in Pixel, für die Positionierung des Bildes auf dem Canvas.
dirtyY	Optional. Vertikale Position (y), in Pixel, für die Positionierung des Bildes auf dem Canvas.
dirtyWidth	Optional. Die Breite, die für das Zeichnen von Bildern auf dem Canvas verwendet wird.
dirtyHeight	Optional. Die Höhe, die für das Zeichnen von Bildern auf dem Canvas verwendet wird.

　HTML Canvas Referenzhandbuch

HTML: <template> Tag