Canvas - rysowanie bitmapy w JavaScript

Autor podstrony: Krzysztof Zajączkowski

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

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:

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

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

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).

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 }

Wynik działania powyższego kodu: