Canvas - rysowanie bitmapy w JavaScript

Stronę tą wyświetlono już: 2362 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

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

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

Listing 2

<img src="rysunki/grassland.jpg" id="myimage" style="display:none"/>
<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

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

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

window.onload = function(){
var canvas = document.getElementById("drawImage");
var ctx = canvas.getContext("2d");
var bitmap = document.getElementById("myimage");
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
}