HTML canvas drawImage() -menetelmä

HTML5 Canvas viittauskirja

Määrittely ja käyttö

drawImage() Metodi piirtää kuvan, taulukon tai videon kankaalle.

drawImage() Menetelmä voi myös piirtää kuvan osia sekä/tai lisätä tai vähentää kuvan kokoa.

Esimerkki

Esimerkki 1

Käytettävä kuva:

kukka

Piirrä kuva taulukkoon ylös:

Selaimesi ei tue HTML5 canvas -tagia.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("tulip");
ctx.drawImage(img, 10, 10);

Kokeile itse

Vinkki:Lisää esimerkkejä sivun alaosassa.

Grammatiikka

JavaScript-grammatiikka 1

Määritä kuvan sijainti taulukossa:

conteksti.drawImage(img,x,y);

JavaScript-grammatiikka 2

Määritä kuvan sijainti taulukossa ja määritä kuvan leveys ja korkeus:

conteksti.drawImage(img,x,y,width,height);

JavaScript-grammatiikka 3

Leikkaa kuva ja määritä sijainti leikattu osa taulukossa:

conteksti.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

Parametrimäärä

Parametri Kuvaus
img Määritä käytettävä kuva, taulukko tai video.
sx Valinnainen. Aloitussijainti leikkaamiselle x-akselilla.
sy Valinnainen. Aloitussijainti leikkaamiselle y-akselilla.
swidth Valinnainen. Leikattavan kuvan leveys.
sheight Valinnainen. Leikattavan kuvan korkeus.
x Kuvan x-akselin sijainti taulukossa.
y Kuvan y-akselin sijainti taulukossa.
width Valinnainen. Käytettävän kuvan leveys (levittäminen tai pienentäminen kuvaa)
height Valinnainen. Käytettävän kuvan korkeus (levittäminen tai pienentäminen kuvaa)

Lisää esimerkkejä

Esimerkki 2

Määritä kuvan sijainti taulukossa ja määritä kuvan leveys ja korkeus:

Selaimesi ei tue HTML5 canvas -tagia.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("tulip");
ctx.drawImage(img, 10, 10, 240, 160);

Kokeile itse

Esimerkki 3

Leikkaa kuva ja määritä sijainti leikattu osa taulukossa:

Selaimesi ei tue HTML5 canvas -tagia.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 90, 130, 90, 80, 20, 20, 90, 80);

Kokeile itse

Esimerkki 4

Käytettävä video (paina toista-nappia aloittaaksesi esityksen):

Taulukko:

Selaimesi ei tue HTML5 canvas -tagia.

JavaScript (jokaisen 20 millisekunnin välein, koodi piirtää videon nykyisen kuvakulman):

var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");
ctx = c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function()} 
{ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);

Kokeile itse

Selaimen tuki

Taulukossa olevat numerot mainitsevat ensimmäisen selaimen version, joka tukee tätä ominaisuutta täysin.

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