Canvas - rysowanie bitmapy w JavaScript
Stronę tą wyświetlono już: 2932 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.
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:
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).
Wynik działania powyższego kodu:
Tytuł:
JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera
Autor:
Jon Duckett
Tytuł:
JavaScript od pierwszej linii kodu. Błyskawiczna nauka pisania gier, stron WWW i aplikacji internetowych
Autor:
Laurence Lars Svekis, Maaike van Putten, Rob Percival
Tytuł:
JavaScript funkcyjnie. Zrównoważone, pragmatyczne programowanie funkcyjne w JavaScript
Autor:
Kyle Simpson
Tytuł:
JavaScript dla dzieci dla bystrzaków
Autor:
Chris Minnick, Eva Holland
Tytuł:
Modularny JavaScript dla zaawansowanych
Autor:
Nicolas Bevacqua
Tytuł:
JavaScript w praktyce. Stwórz twitterowego bota, system sygnalizacyjny LED i inne projekty z użyciem Node.js i Raspberry Pi
Autor:
Lynn Beighley
Tytuł:
Matematyka dla programistów JavaScript
Autor:
Jacek Piechota
Tytuł:
JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera
Autor:
Jon Duckett
Tytuł:
ECMAScript 6. Przewodnik po nowym standardzie języka JavaScript
Autor:
Nicholas C. Zakas
Tytuł:
JavaScript i wzorce projektowe. Programowanie dla zaawansowanych. Wydanie II
Autor:
Simon Timms