Canvas - rysowanie bitmapy w JavaScript

Stronę tą wyświetlono już: 785 razy

Rysowanie bitmapy na canvas-ie w JavaScript odbywa się za pomocą jednej metody kontekstu urządzenia związanego z danym canvas-em. Metodą tą jest drawImage. Zanim jednak, to trzeba sobie wyjaśnić jak można pozyskać samą bitmapę. Istnieją praktycznie dwie metody: pierwsza polegająca na wyciągnięciu elementu img z DOM załadowanej strony, zaś drugą jest użycie obiektu Image do załadowania takiej grafiki.

Listing 1
  1. window.onload = function(){
  2. var canvas = document.getElementById("drawImage");
  3. var ctx = canvas.getContext("2d");
  4. var bitmap = document.getElementById("myimage");
  6. ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height); // rysowanie bitmapy tak, by wypełniła canvas
  7. }

Aby powyższy kod zadziałał na stronie musi być następujący kod HTML:

Listing 2
  1. <img src="rysunki/grassland.jpg" id="myimage" style="display:none"/>
  2. <canvas width="300" height="150" id="drawImage" style="display: block; margin: auto"></canvas>

Wtedy to wynik działania skryptu będzie następujący:

Metodę drawImage można również wywołać z trzema argumentami:

Listing 3
  1. window.onload = function(){
  2. var canvas = document.getElementById("drawImage");
  3. var ctx = canvas.getContext("2d");
  4. var bitmap = document.getElementById("myimage");
  6. ctx.drawImage(bitmap, 0, 0);
  7. }

Wynik działania powyższego kodu:

Ostatnia możliwość to wywołanie metody drawImage z dziewięcioma parametrami umożliwia określenie prostokąta docelowego i prostokąta źródłowego (przycinanie z skalowaniem).

Listing 4
  1. window.onload = function(){
  2. var canvas = document.getElementById("drawImage");
  3. var ctx = canvas.getContext("2d");
  4. var bitmap = document.getElementById("myimage");
  6. ctx.drawImage(bitmap, 100, 100, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height); // argumenty to: bitmapa; współrzędne prostokąta wycinanego z bitmapy; współrzędne prostokąta docelowego
  7. }

Wynik działania powyższego kodu:

Tematy powiązane

Komentarze