Metoda drawImage() na płótnie Canvas

Podręcznik Canvas

Definicja i użycie

drawImage() Metoda rysuje obraz, płótno lub wideo na płótnie.

drawImage() Metoda może również rysować pewne części obrazu oraz/ lub zwiększać lub zmniejszać rozmiar obrazu.

Przykład

Przykład 1

Obraz do użycia:

tulip

Narysuj obraz na płótnie:

Twoja przeglądarka nie obsługuje tagu HTML5 canvas.

JavaScript:

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

Spróbuj sam

Wskazówka:Więcej przykładów znajduje się w dolnej części strony.

Gramatyka

JavaScript语法 1

Umieść obraz na płótnie:

kontekst.drawImage(img,x,y);

JavaScript语法 2

Umieść obraz na płótnie i określ jego szerokość i wysokość:

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

JavaScript语法 3

Wytnij obraz i umieść wycięty fragment na płótnie:

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

参数值

参数 Opis
img Określ używany obraz, płótno lub wideo.
sx Opcjonalnie. Pozycja x początku wycinania.
sy Opcjonalnie. Pozycja y początku wycinania.
swidth Opcjonalnie. Szerokość wyciętego obrazu.
sheight Opcjonalnie. Wysokość wyciętego obrazu.
x Pozycja x obrazu na płótnie.
y Pozycja y obrazu na płótnie.
width Opcjonalnie. Szerokość używanego obrazu (rozszerz lub zmniejsz obraz).
height Opcjonalnie. Wysokość używanego obrazu (rozszerz lub zmniejsz obraz).

Więcej przykładów

Przykład 2

Umieść obraz na płótnie i określ jego szerokość i wysokość:

Twoja przeglądarka nie obsługuje tagu HTML5 canvas.

JavaScript:

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

Spróbuj sam

Przykład 3

Wytnij obraz i umieść wycięty obszar na płótnie:

Twoja przeglądarka nie obsługuje tagu HTML5 canvas.

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);

Spróbuj sam

Przykład 4

Używane wideo (naciśnij przycisk odtwarzania, aby zacząć pokaz):

Rysunek:

Twoja przeglądarka nie obsługuje tagu HTML5 canvas.

JavaScript (co 20 milisekund, kod rysuje bieżący klatek wideo):

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);

Spróbuj sam

Wsparcie przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Komentarz:Internet Explorer 8 i wcześniejsze wersje nie obsługują elementu <canvas>.

Podręcznik Canvas