HTML canvas putImageData() 方法

Εγχειρίδιο HTML5 Canvas

定义和用法

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

提示：请参阅 getImageData() 方法，它可复制画布上指定的矩形的像素数据。

提示：请参阅 createImageData() 方法，它可创建新的空白ImageData对象。

实例

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

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

亲自试一试

语法

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

参数值

参数 描述
imgData Ο αντικείμενος ImageData που θα τοποθετηθεί στο καanvas.
x Η κορυφή της αριστεράς γωνίας του αντικειμένου ImageData, μετρημένο σε pixel.
y Η κορυφή της δεξιάς γωνίας του αντικειμένου ImageData, μετρημένο σε pixel.
dirtyX Προαιρετικό. Ο οριζόντιος πίνακας (x), μετρημένος σε pixel, για τη θέση της εικόνας στο καanvas.
dirtyY Προαιρετικό. Ο οριζόντιος πίνακας (y), μετρημένος σε pixel, για τη θέση της εικόνας στο καanvas.
dirtyWidth Προαιρετικό. Η πλάτος που χρησιμοποιείται για τη διατύπωση εικόνας στο καanvas.
dirtyHeight Προαιρετικό. Η ύψος που χρησιμοποιείται για τη διατύπωση εικόνας στο καanvas.

Υποστήριξη προγράμματος περιήγησης

Τα αριθμήματα στην τаблицή σημειώνουν την έκδοση του προγράμματος περιήγησης που υποστηρίζει πρώτη φορά την ιδιότητα.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Σημείωση:Η έκδοση Internet Explorer 8 και οι προηγούμενες εκδόσεις δεν υποστηρίζουν το στοιχείο <canvas>.

Εγχειρίδιο HTML5 Canvas