Imagine de a utiliza:
Exemplu
Desenați imaginea pe pânză:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10); Încearcă - l singur » Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin metoda.
| Metodă | |||||
|---|---|---|---|---|---|
| drawImage() | 4 | 9 | 3.6 | 4 | 10.1 |
Definiție și utilizare
drawImage() metoda trage o imagine, panza sau video pe pânză.
drawImage() metoda poate trage , de asemenea , părți ale unei imagini și / sau creșterea / reduce dimensiunea imaginii.
JavaScript Sintaxa
Poziționați imaginea pe pânză:
| sintaxa JavaScript: | context . drawImage( img,x,y ) ; |
|---|
Poziționați imaginea pe pânză, și specificați lățimea și înălțimea imaginii:
| sintaxa JavaScript: | context . drawImage( img,x,y,width,height ) ; |
|---|
Clip imaginea și poziția părții tăiate pe pânză:
| sintaxa JavaScript: | context . drawImage( img,sx,sy,swidth,sheight,x,y,width,height ) ; |
|---|
Valorile parametrilor
| Parametru | Descriere | Joaca-l |
|---|---|---|
| img | Specifică imaginea, panza sau elementul video pentru a utiliza | |
| sx | Opțional. Coordonata x unde pentru a începe tăiere | Joaca - l » |
| sy | Opțional. Coordonata y în cazul în care pentru a începe de tăiere | Joaca - l » |
| swidth | Opțional. Lățimea imaginii tăiate | Joaca - l » |
| sheight | Opțional. Înălțimea imaginii tăiate | Joaca - l » |
| x | Coordonata x unde să plaseze imaginea pe pânză | Joaca - l » |
| y | Coordonata y unde să plaseze imaginea pe pânză | Joaca - l » |
| width | Opțional. Lățimea imaginii de utilizat (stretch or reduce the image) | Joaca - l » |
| height | Opțional. Înălțimea imaginii de a utiliza (stretch or reduce the image) de a (stretch or reduce the image) | Joaca - l » |
Mai multe exemple
Exemplu
Poziționați imaginea pe pânză, și specificați lățimea și înălțimea imaginii:
JavaScript:
var c=document.getElementById("myCanvas");
var
ctx=c.getContext("2d");
var
img=document.getElementById("scream");
ctx.drawImage(img,10,10,150,180); Încearcă - l singur » Exemplu
Clip imaginea și poziția părții tăiate pe pânză:
JavaScript:
var c=document.getElementById("myCanvas");
var
ctx=c.getContext("2d");
var
img=document.getElementById("scream");
ctx.drawImage(img,90,130,50,60,10,10,50,60); Încearcă - l singur » Exemplu
Video pentru a utiliza (press Play to start the demonstration) pe (press Play to start the demonstration) :
Canvas:
JavaScript (codul trage cadrul curent al video la fiecare 20 milisecundă):
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,5,5,260,125)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false); Încearcă - l singur » <Canvas obiect