Canvas - rysowanie podstawowych kształtów graficznych w JavaScript

Autor podstrony: Krzysztof Zajączkowski

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

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

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: