Obraz używać:
Przykład
Narysować obraz na płótnie:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10); Spróbuj sam " Wsparcie przeglądarka
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje metodę.
| metoda | |||||
|---|---|---|---|---|---|
| drawImage() | 4.0 | 9.0 | 3.6 | 4.0 | 10,1 |
Definicja i Wykorzystanie
drawImage() Metoda opiera się obraz, płótno lub wideo na płótnie.
drawImage() metoda może również zwrócić części obrazu i / lub zwiększenie / zmniejszenie rozmiaru.
Składnia JavaScript
Umieść obraz na płótnie:
| Składnia JavaScript: | context . drawImage( img,x,y ) ; |
|---|
Umieść obraz na płótnie i określić wysokość i szerokość obrazka:
| Składnia JavaScript: | context . drawImage( img,x,y,width,height ) ; |
|---|
Obcięcie obrazu i ustawić przycięte części na płótnie:
| Składnia JavaScript: | context . drawImage( img,sx,sy,swidth,sheight,x,y,width,height ) ; |
|---|
wartości parametrów
| Parametr | Opis | Graj |
|---|---|---|
| img | Określa obraz, płótno, lub element wideo do korzystania | |
| sx | Opcjonalny. Współrzędnej X zacząć wycinek | Graj " |
| sy | Opcjonalny. Współrzędną y zacząć wycinek | Graj " |
| swidth | Opcjonalny. Szerokość przyciętego obrazu | Graj " |
| sheight | Opcjonalny. Wysokość przyciętego obrazu | Graj " |
| x | Współrzędna x, gdzie umieścić obraz na płótnie | Graj " |
| y | Współrzędną y, gdzie umieścić obraz na płótnie | Graj " |
| width | Opcjonalny. Szerokość obrazu, która ma (stretch or reduce the image) | Graj " |
| height | Opcjonalny. Wysokość obrazu, która ma (stretch or reduce the image) | Graj " |
Więcej przykładów
Przykład
Umieść obraz na płótnie i określić wysokość i szerokość obrazka:
JavaScript:
var c=document.getElementById("myCanvas");
var
ctx=c.getContext("2d");
var
img=document.getElementById("scream");
ctx.drawImage(img,10,10,150,180); Spróbuj sam " Przykład
Obcięcie obrazu i ustawić przycięte części na płótnie:
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); Spróbuj sam " Przykład
Wideo w użyciu (press Play to start the demonstration) :
Brezentowy:
JavaScript (kod zwraca bieżącą klatkę wideo co 20 milisekund):
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); Spróbuj sam " <Płótno Przedmiot