Metoda drawImage() w HTML canvas

Podręcznik HTML5 Canvas

Definicja i użycie

drawImage() Metoda rysująca 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

Używany obraz:

tulip

Narysuj obraz na górze kanvasa:

Twoja przeglądarka nie obsługuje znacznika 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ę na dole strony.

Gramatyka

Gramatyka JavaScript 1

Umieść obraz na kanvasie:

kontekst.drawImage(img,x,y);

Gramatyka JavaScript 2

Umieść obraz na kanvasie i określ jego szerokość i wysokość:

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

Gramatyka JavaScript 3

Wytnij obraz i umieść wycięty fragment na kanvasie:

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

Wartość parametru

Parametr Opis
img Określ używany obraz, kanvas lub wideo.
sx Opcjonalnie. Położenie x początku wycinania.
sy Opcjonalnie. Położenie y początku wycinania.
swidth Opcjonalnie. Szerokość wyciętego obrazu.
sheight Opcjonalnie. Wysokość wyciętego obrazu.
x Położenie x obrazu na kanvasie.
y Położenie y obrazu na kanvasie.
width Opcjonalnie. Szerokość używanego obrazu. (Rozciągnij lub zmniejsz obraz)
height Opcjonalnie. Wysokość używanego obrazu. (Rozciągnij lub zmniejsz obraz)

Więcej przykładów

Przykład 2

Umieść obraz na kanvasie i określ jego szerokość i wysokość:

Twoja przeglądarka nie obsługuje znacznika 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 fragment na kanvasie:

Twoja przeglądarka nie obsługuje znacznika 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

Do użycia wideo (naciśnij przycisk odtwarzania, aby zacząć pokaz):

Kanvas:

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

JavaScript (co 20 milisekund, kod rysuje bieżące klatki 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

Obsługa 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

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

Podręcznik HTML5 Canvas