Canvas - rysowanie podstawowych kształtów graficznych w JavaScript
Stronę tą wyświetlono już: 9854 razy
Znacznik <canvas> w HTML-u stworzony został z myślą realizacji zadań rysowania po stronie użytkownika. Takie rozwiązanie daje możliwość tworzenia graficznych, rysowanych animacji. Warto więc jest się zapoznać z możliwościami rysowania po canvas-ie.
Pozyskiwanie kontekstu graficznego
Jak to zwykle bywa w programowaniu, aby coś narysować najpierw trzeba pozyskać kontekst urządzenia, który powiązany jest z canvas-em. Żeby jednak było możliwe uzyskanie takiego kontekstu najpierw trzeba utworzyć lub uzyskać dostęp do obiektu canvas znajdującego się na stronie. Oto przykład:
Sterowanie właściwościami rysowanego elementu graficznego
Każdy element graficzny (koło, elipsa, prostokąt czy wielokąt) mają pewne właściwości takie jak:
- kolor wypełnienia;
- kolor obramowania;
- szerokość linii obramowania
Zmianę powyższych właściwości umożliwiają następujące pola klasy i metody kontekstu rysowania:
fillStyle - steruje kolorem wypełnienia kształtu. Przykłady:
ctx.fillStyle = "red"; // ustawienie koloru wypełnienia na czerwony ctx.fillStyle = "#ff0000"; // to samo co powyżej tylko w zapisie szesnastkowym ctx.fillStyle = "rgb(255, 0, 0)"; // to samo co powyżej tylko w zapisie dziesiętnym ctx.fillStyle = "rgba(255, 0, 0, 0.5)"; // to samo co powyżej, tylko że z ustawieniem połowicznej przezroczystościstrokeStyle - steruje kolorem obramowania kształtu
ctx.strokeStyle = "red"; // ustawienie koloru obramowania na czerwony ctx.strokeStyle = "#ff0000"; // to samo co powyżej tylko w zapisie szesnastkowym ctx.strokeStyle = "rgb(255, 0, 0)"; // to samo co powyżej tylko w zapisie dziesiętnym ctx.strokeStyle = "rgba(255, 0, 0, 0.5)"; // to samo co powyżej, tylko że z ustawieniem połowicznej przezroczystościlineWidth - szerokość obramowania kształtu;
- lineJoin - steruje sposobem zakończenia przejść linii łamanych. Dostępne są następujące wartości:
"round" - zakończenie zaokrąglone;
"bevel" - zakończenie ścięte;
- "miter" - zakończenie ostre;
setLineDash - metoda ta przyjmuje jako argument tablicę określającą odstępy pomiędzy liniami kreskowania;
- lineDashOffset - steruje przesunięciem stylu linii kreskowania.
Metody rysujące prostokąt
Istnieją dwie metody rysowania prostokąta: z wypełnieniem i z obramowaniem, oto przykład:
Istnieje jeszcze jedna metoda clearRect, która (jak sama nazwa wskazuje) czyści obszar prostokątny.
Metody rysujące okręgi i łuki
Rysowanie łuków i okręgów wymaga użycia kilku metod, ale główną z nich, która powoduje, że rysowany będzie okrąg jest metoda arc lub arcTo. Oto przykład:
Rysowanie łuku za pomocą metody arcTo:
Wynik działania powyższego skryptu:
Metody umożliwiające rysowanie wielokątów i linii łamanych
Znów konieczne będzie użycie metod związanych z ścieżkami, oto przykład rysowania wielokąta:
Powyższy kod narysuje trójkąt.
Rysowanie krzywych Beziera
Krzywe Bezjera umożliwiają tworzenie kształtów składających się z krzywych. Istnieją dwa typy metod rysujących krzywe tego typu. Pierwszą z nich jest quadraticCurveTo, która rysuje krzywą Beziera z jednym punktem sterującym krzywizną.
Wynik działania kodu z zaznaczonym na czerwono punktem sterującym krzywizną wyglądał będzie następująco:
Drugą metodą z dwoma oddzielnymi punktami sterującymi rysowaniem krzywizny jest bezierCurveTo. Oto przykład:
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