HTML5 Canvas - wyświetlanie obrazu

W tym artykule zajmiemy się wyświetlaniem na obiekcie Canvas obrazów, czyli plików w różnych formatach graficznych.

Aby wyświetlić na płótnie obrazek, należy najpierw stworzyć obiekt image, za pomocą dyrektywy new Image(). Ważne jest, aby przed pobraniem z pamięci pliku obrazu zdefiniować co chcemy z tym obrazem zrobić. Najlepiej jest określić wartość właściwości onload obiektu image.

Do wyświetlania samego obrazka używamy metody w najprostszej jej postaci:

context.drawImage(obrazek,x,y);

gdzie parametr obrazek oznacza obiekt obrazka, a x i y współrzędne położenia obrazka na płótnie.

Zobaczmy to na przykładzie:

Przykład

Oto przykład rysowania obrazka z pliku gif:

<html>
<head>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var obrazek = new Image();
obrazek.onload = function(){
context.drawImage(this,80,70);
}
obrazek.src="grafika/ikona-biologia.gif";
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid black;">
</canvas>
</body>
</html>
Lupa

Skalowanie

Postać metody drawImage dla skalowania jest następująca:

context.drawImage(obrazek,x,y,szer,wys);

gdzie parametr obrazek oznacza obiekt obrazka, (x,y) współrzędne położenia obrazka na płótnie, szer i wys oznacza docelową szerokość i wysokość obrazka na płótnie, co umożliwia jego przeskalowanie.

Przykład skalowania

Oto przykład nasz przykład:

<html>
<head>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var obrazek = new Image();
obrazek.onload = function(){
context.drawImage(this,10,10,280,280);
context.drawImage(this,100,140,180,180);
}
obrazek.src="grafika/ikona-biologia.gif";
};
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid black;">
</canvas>
</body>
</html>
Lupa

Przycinanie i skalowanie

Postać metody drawImage dla skalowania i przycinania jest następująca:

context.drawImage(obrazek,x,y,szer,wys,x1,x2,szer1,szer2);

gdzie parametr obrazek oznacza obiekt obrazka, (x,y) współrzędne wycinka na źródle obrazka, szer i wys oznacza szerokość i wysokość wycinka źródła obrazka. Natomiast x1,x2,szer2, wys1 oznaczają położenie celu na płótnie i jego rozmiary. Jeżeli nie chcemy skalować, szerokość i wysokość źródła musi być taka sama jak docelowego obrazka.

Przykład skalowania i przycinania

Oto przykład nasz przykład:

<html>
<head>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var obrazek = new Image();
obrazek.onload = function(){
context.drawImage(this,40,40,60,60,50,50,200,200);
}
obrazek.src="grafika/ikona-biologia.gif";
};
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid black;">
</canvas>
</body>
</html>
Lupa





© medianauka.pl, 2018-07-11, ART-3567





Polecamy w naszym sklepie

Kolorowe skarpetki Kostka
kolorowe skarpetki góra lodowa
Kolorowe skarpetki urodzinowe
Kolorowe skarpetki Miasto
Matematyka konkretna
Niektóre treści nie są dostosowane do Twojego profilu. Jeżeli jesteś pełnoletni możesz wyrazić zgodę na przetwarzanie swoich danych osobowych. W ten sposób będziesz miał także wpływ na rozwój naszego serwisu.
© ® Media Nauka 2008-2022 r.