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>

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>

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>