Imagine de a utiliza:
Exemplu
Desenați imaginea pe pânză:
JavaScript:
window.onload = function() {
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() | da | 9 | da | da | da |
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.
Notă: Nu puteți apela drawImage() metoda înainte ca imaginea a încărcat. Pentru a se asigura că imaginea a fost încărcată, puteți apela drawImage() from window. onload() de drawImage() from window. onload() drawImage() from window. onload() sau din document. getElementById(" imageID ") .onload document. getElementById(" imageID ") .onload .
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:
window.onload = function() {
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:
window.onload = function() {
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 (the code draws the current frame of the video every 20 millisecond) la (the code draws the current frame of the video every 20 millisecond) :
var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
var ctx=c.getContext('2d');
var i;
v.addEventListener('play',function() {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 »