HTML-ruudukon putImageData() -menetelmä

HTML5 Canvas -viittauskirja

määritelmä ja käyttö

putImageData() metodi palauttaa kuvatiedot (määritetystä ImageData-objektista) takaisin ruudukkoon.

vinkki:Katso getImageData() metodi, joka kopioi tietyn ruudukon alueen kuvapikseleiden tiedot.

vinkki:Katso createImageData() metodi, joka luo uuden tyhjän ImageData-objektin.

esimerkki

Seuraava koodi kopioi tietyn ruudukon alueen kuvapikseleiden tiedot ja palauttaa ne takaisin ruudukkoon käyttämällä getImageData() ja putImageData() -metodeja:

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

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

parametrien arvot

parametrit kuvaus
imgData Määritellään palautettava ImageData-objekti, joka asetetaan takaisin ponnahdusikkunaan.
x ImageData-objektin x-akselin yläkulman koordinaatti, pisteinä.
y ImageData-objektin y-akselin yläkulman koordinaatti, pisteinä.
dirtyX Valinnainen. Horisontaalinen arvo (x), pisteinä, kuvan sijoituspaikka ponnahdusikkunassa.
dirtyY Valinnainen. Horisontaalinen arvo (y), pisteinä, kuvan sijoituspaikka ponnahdusikkunassa.
dirtyWidth Valinnainen. Leveys, jota käytetään kuvan piirtämiseen ponnahdusikkunassa.
dirtyHeight Valinnainen. Korkeus, jota käytetään kuvan piirtämiseen ponnahdusikkunassa.

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen täysin tukevan siihen ominaisuuden selaimen version.

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ä.

HTML5 Canvas -viittauskirja