Canvas putImageData() -menetelmä

Canvas-ohjekirja

Määritelmä ja käyttö

putImageData() Metodi palauttaa kuvatiedot (määritetystä ImageData-objektista) takaisin taululle.

Vinkki:Katso myös getImageData() Metodi, joka kopioi taululla määritetyn ruudukon kuvapistetiedot.

Vinkki:Katso myös createImageData() Metodi, joka luo uuden tyhjän ImageData-objektin.

Esimerkki

Seuraava koodi kopioi taululle määritetyn ruudukon kuvapistetiedot getImageData()-metodilla ja palauttaa ne taululle putImageData()-metodilla:

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);
}

Kokeile itse

Syntaksi

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

Parametrimäärä

Parametri Kuvaus
imgData Määritellään palautettava ImageData-objekti taululle.
x ImageData-objektin x-akselin yläkulman koordinaatti, kuvapisteinä.
y ImageData-objektin y-akselin yläkulman koordinaatti, kuvapisteinä.
dirtyX Valinnainen. Horisontaalinen arvo (x), kuvapisteinä, kuvan sijoituspaikka taululla.
dirtyY Valinnainen. Horisontaalinen arvo (y), kuvapisteinä, kuvan sijoituspaikka taululla.
dirtyWidth Valinnainen. Leveys, jota käytetään kuvan piirtämiseen taululle.
dirtyHeight Valinnainen. Korkeus, jota käytetään kuvan piirtämiseen taululle.

Selain tukee

Taulukossa olevat numerot viittaavat ensimmäiseen täysin tukevaan selaimen versioon kyseiselle ominaisuudelle.

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

Huomautus:Internet Explorer 8 ja aikaisemmat versiot eivät tue <canvas>-elementtiä.

Canvas-ohjekirja