Canvas - rysowanie podstawowych kształtów graficznych w JavaScript
Stronę tą wyświetlono już: 1248 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:
- var canvas = document.getElementById("myCanvas");
- var ctx = canvas.getContext("2d"); // pozyskiwanie kontekstu rysowania 2d
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:
Listing 2 - 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ści
strokeStyle - steruje kolorem obramowania kształtu
Listing 3 - 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ści
lineWidth - 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:
- ctx.lineWidth = 10;
- ctx.strokeStyle = "red";
- ctx.fillStyle = "green";
- ctx.fillRect(10, 10, 200, 100); // rysowanie wypełnionego prostokąta za pomocą parametrów: x, y, szerokość, wysokość
- ctx.strokeRect(10, 10, 200, 100); // rysowanie obramowania prostokąta za pomocą parametrów: x, y, szerokość, wysokość
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:
- ctx.beginPath(); // rozpoczęcie rysowania ścieżki
- var xc = 100; // współrzędna x środka okręgu
- var yc = 150; // współrzędna y środka okręgu
- var ray = 50; // promień okręgu
- var beginAngle = 0; // początek kąta łuku (ja rysuję okrąg więc 0)
- var endAngle = Math.PI * 2; // koniec kata łuku (ja rysuję okrąg więc 2 * pi [rad] - co odpowiada 360 stopniom)
- ctx.arc(xc, yc, ray, beginAngle, endAngle); // tworzenie ścieżki rysowania
- ctx.fill(); // wypełnienie ścieżki rysowania
- ctx.stroke(); // obrysowanie ścieżki rysowania
Rysowanie łuku za pomocą metody arcTo:
- var canvas = document.getElementById("arcTo");
- var ctx = canvas.getContext("2d");
- ctx.beginPath(); // rozpoczęcie rysowania ścieżki
- ctx.strokeStyle = "red";
- ctx.lineWidth = 5;
- var x1 = 120; // współrzędna x
- var y1 = 20; // współrzędna y
- var x2 = 120; // współrzędna x końca łuku
- var y2 = 40; // współrzędna y końca łuku
- var ray = 20; // promień okręgu
- ctx.moveTo(20, 20);
- ctx.lineTo(x1 - ray, y1);
- ctx.arcTo(x1, y1, x2, y2, ray); // tworzenie ścieżki rysowania
- ctx.lineTo(120, 80);
- ctx.fill(); // wypełnienie ścieżki rysowania
- ctx.stroke(); // obrysowanie ścieżki rysowania
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:
- ctx.beginPath();
- ctx.moveTo(10, 10);
- ctx.lineTo(110,10);
- ctx.lineTo(60, 60);
- ctx.closePath();
- ctx.fill();
- ctx.stroke();
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ą.
- var canvas = document.getElementById("quadraticCurveTo");
- var ctx = canvas.getContext("2d");
- ctx.beginPath();
- ctx.moveTo(10, 10);
- ctx.quadraticCurveTo(60, 60, 110, 10);
- ctx.stroke();
- ctx.fillStyle = 'blue';
- ctx.fillStyle = 'red';
- ctx.fillRect(55, 55, 10, 10);
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: