Zielony Smok

HTML5 canvas – tutorial

Wymiarowanie obrazów

Nasz obrazek źródłowy “images/aniolek.jpg” ma wymiary:

  • szerokość (width) = 303px
  • wysokość (height) = 407px

Aniołek

Funkcja drawImage(obrazek, sx, sy, sw, sh, dx, dy, dw, dh) służy do pobierania fragmentu obrazka źródłowego i wyświetlenia pobranego fragmentu w znaczniku <canvas>.

Parametry z przedrostkiem ‘s’ są danymi pobieranego wycinka.

Parametry z przedrostkiem ‘d’ są danymi obrazka wyświetlanego.

Z obrazka pobieramy wycinek o współrzędnych (sx=55, sy=17, sw=180, sh=150), czyli mamy określone parametry metody drawImage("images/aniolek.jpg", 55, 17, 180, 150, dx, dy, dw, dh).

Aniołek

a następnie wyświetlamy wycinek na <canvas>. Parametry wyświetlenia to: (dx=55, dy=17, dw=180, dh=150), czyli mamy określone parametry funkcji drawImage("images/aniolek.jpg", sx, sy, sw, sh, 55, 17, 180, 150)

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Listing

    window.onload = function() {
	var cv = document.getElementById("canvas");
	var ctx = cv.getContext("2d");
	var img = new Image();
	img.onload = function() {
		//ctx.drawImage(img,0,0,303,417,0,0,303,417);//cały
		//ctx.drawImage(img, 0, 0, 303, 208, 0, 0, 303, 208);//gorna polowa
		//ctx.drawImage(img, 0, 208, 303, 208, 0, 208, 303, 208);//dolna połowa
		ctx.drawImage(img, 55, 17, 180, 150, 55, 17, 180, 150);//wycinek obrazka
	}
	   img.src = "https://javafx.pl/wp-content/uploads/2021/06/aniolek.jpg";
    };
    

W ten sposób mamy skompletowaną funkcję
drawImage("images/aniolek.jpg", 55, 17, 180, 150, 55, 17, 180, 150)

Obrazek został wyświetlony na <canvas> dokładnie w tym samym miejscu co na obrazku wyjściowym. Obrazek pobrany i wyświetlony są tej samej wielkości.

Oczywiście nic nie stoi na przeszkodzie, aby obrazek wyświetlić w innym miejscu lub w innych rozmiarach. Wystarczy zmienić parametry dx, dy, dw, dh.