Wyświetlanie obrazów na kanwie

W rozdziale:

Obrazy

IE	Firefox	Safari	Chrome	Opera	iPhone	Android
7.0+^*	3.0+	3.0+	3.0+	10.0+	1.0+	1.0+
* Internet Explorer 7 i 8 wymagają dodatku zewnętrznej biblioteki explorercanvas. Internet Explorer 9 standardowo obsługuje obrazy w elemencie `<canvas>`.

Oto rysunek kota:

Element img

A to ten sam kot, tylko narysowany na kanwie:

Element canvas

Kontekst rysunkowy kanwy ma metodę drawImage() służącą do rysowania obrazów na kanwie. Metoda ta pobiera trzy, pięć lub dziewięć argumentów.

Metoda drawImage(image, dx, dy) pobiera obraz i rysuje go na kanwie. Współrzędne (dx, dy) określają położenie lewego górnego rogu tego rysunku. Gdyby podano współrzędne (0, 0), to początek obrazu znajdowałby się w lewym górnym rogu kanwy.
Metoda drawImage(image, dx, dy, dw, dh) pobiera obraz, skaluje go do szerokości dw i wysokości dh a następnie rysuje go na kanwie zaczynając w punkcie o współrzędnych (dx, dy).
Metoda drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) pobiera obraz, wycina z niego prostokąt (sx, sy, sw, sh), skaluje go do rozmiarów (dw, dh), a następnie rysuje go na kanwie zaczynając w punkcie o współrzędnych (dx, dy).

W specyfikacji HTML5 znajduje się objaśnienie parametrów metody drawImage():

Prostokąt źródłowy to prostokąt [w obrębie obrazu źródłowego], którego rogi wyznaczają punkty (sx, sy), (sx+sw, sy), (sx+sw, sy+sh) oraz (sx, sy+sh).

Prostokąt docelowy to prostokąt [w obrębie kanwy], którego rogi wyznaczają punkty (dx, dy), (dx+dw, dy), (dx+dw, dy+dh) oraz (dx, dy+dh).

Aby narysować obraz na kanwie, trzeba mieć jakiś obraz. Może to być istniejący już element <img>, ale można też utworzyć obiekt Image() przy użyciu JavaScript. W obu przypadkach rysowanie obrazu na kanwie można rozpocząć dopiero po jego całkowitym wczytaniu.

Istniejący element <img> można bezpiecznie narysować na kanwie podczas zdarzenia window.onload.

Użycie elementu img

<img id="cat" src="images/cat.png" alt="sleeping cat" width="177" height="113">
<canvas id="e" width="177" height="113"></canvas>
<script>
window.onload = function() {
  var canvas = document.getElementById("e");
  var context = canvas.getContext("2d");
  var cat = document.getElementById("cat");
  context.drawImage(cat, 0, 0);
};
</script>

Jeśli tworzony jest obiekt obrazu przy użyciu JavaScriptu, można bezpiecznie go narysować na kanwie podczas zdarzenia Image.onload.

Użycie obiektu Image()

<canvas id="e" width="177" height="113"></canvas>
<script>
  var canvas = document.getElementById("e");
  var context = canvas.getContext("2d");
  var cat = new Image();
  cat.src = "images/cat.png";
  cat.onload = function() {
    context.drawImage(cat, 0, 0);
  };
</script>

Trzeci i czwarty parametr metody drawImage() służą do skalowania obrazu. To jest ten sam obraz po zmniejszony o połowę i narysowany kilka razy w różnych miejscach na kanwie.

Poniżej znajduje się kod źródłowy tego skryptu:

cat.onload = function() {
  for (var x = 0, y = 0;
       x < 500 && y < 375;
       x += 50, y += 37) {
    context.drawImage(cat, x, y, 88, 56);
  }
};

W tym momencie nasuwa się ciekawe pytanie: po co w ogóle mielibyśmy rysować jakiekolwiek obrazy na kanwie? Jakie korzyści w porównaniu z użyciem elementu <img> i reguł CSS mamy ze stosowania tej bardziej skomplikowanej techniki? Nawet efekt „multikota” można by było uzyskać przy użyciu 10 nakładających się na siebie elementów <img>.

Najkrócej mówiąc powód jest taki sam, jak ten dla którego rysujemy tekst na kanwie. Układ współrzędnych kanwy zawiera tekst, linie i figury geometryczne. Tekst jest po prostu tylko częścią większego dzieła. Na bardziej złożonym schemacie można by było użyć metody drawImage() do narysowania ikon, sprite’ów i innych grafik.

Semantyka HTML5 Kurs HTML5 Wideo na stronie