HTML canvas putImageData() metod

HTML5 Canvas-referenshandbok

Definition och användning

putImageData() metod lägger tillbaka bilddata (från ett specifikt ImageData-objekt) på canvasen.

Tips:Se getImageData() metod som kan kopiera pixeldata från en specificerad rektangel på canvasen.

Tips:Se createImageData() metod som kan skapa ett nytt tomt ImageData-objekt.

exempel

Följande kod kopierar pixeldata från en specificerad rektangel på canvasen och lägger tillbaka bilddata via 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);
}

prova själv

syntaks

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

parametervärden

parametrar beskrivning
imgData Definiera det ImageData-objekt som ska placeras tillbaka på canvas.
x x-koordinaten för den övre vänstra hörnet av ImageData-objektet, i pixlar.
y y-koordinaten för den övre vänstra hörnet av ImageData-objektet, i pixlar.
dirtyX Valfritt. Horisontell värde (x), i pixlar, för platsen där bilden placeras på canvas.
dirtyY Valfritt. Horisontell värde (y), i pixlar, för platsen där bilden placeras på canvas.
dirtyWidth Valfritt. Bredden som används för att rita bilden på canvas.
dirtyHeight Valfritt. Höjden som används för att rita bilden på canvas.

Webbläsarstöd

Tal i tabellen anger den första webbläsarversionen som helt stöder egenskapen.

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

Kommentar:Internet Explorer 8 och tidigare versioner stöder inte <canvas>-elementet.

HTML5 Canvas-referenshandbok