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

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

Listing 1
  1. var canvas = document.getElementById("myCanvas");
  2. 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
    1. ctx.fillStyle = "red"; // ustawienie koloru wypełnienia na czerwony
    2. ctx.fillStyle = "#ff0000"; // to samo co powyżej tylko w zapisie szesnastkowym
    3. ctx.fillStyle = "rgb(255, 0, 0)"; // to samo co powyżej tylko w zapisie dziesiętnym
    4. 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
    1. ctx.strokeStyle = "red"; // ustawienie koloru obramowania na czerwony
    2. ctx.strokeStyle = "#ff0000"; // to samo co powyżej tylko w zapisie szesnastkowym
    3. ctx.strokeStyle = "rgb(255, 0, 0)"; // to samo co powyżej tylko w zapisie dziesiętnym
    4. 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:

Listing 4
  1. ctx.lineWidth = 10;
  2. ctx.strokeStyle = "red";
  3. ctx.fillStyle = "green";
  5. ctx.fillRect(10, 10, 200, 100); // rysowanie wypełnionego prostokąta za pomocą parametrów: x, y, szerokość, wysokość
  6. 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:

Listing 5
  1. ctx.beginPath(); // rozpoczęcie rysowania ścieżki
  2. var xc = 100; // współrzędna x środka okręgu
  3. var yc = 150; // współrzędna y środka okręgu
  4. var ray = 50; // promień okręgu
  5. var beginAngle = 0; // początek kąta łuku (ja rysuję okrąg więc 0)
  6. var endAngle = Math.PI * 2; // koniec kata łuku (ja rysuję okrąg więc 2 * pi [rad] - co odpowiada 360 stopniom)
  8. ctx.arc(xc, yc, ray, beginAngle, endAngle); // tworzenie ścieżki rysowania
  10. ctx.fill(); // wypełnienie ścieżki rysowania
  11. ctx.stroke(); // obrysowanie ścieżki rysowania

Rysowanie łuku za pomocą metody arcTo:

Listing 6
  1. var canvas = document.getElementById("arcTo");
  2. var ctx = canvas.getContext("2d");
  3. ctx.beginPath(); // rozpoczęcie rysowania ścieżki
  5. ctx.strokeStyle = "red";
  6. ctx.lineWidth = 5;
  8. var x1 = 120; // współrzędna x
  9. var y1 = 20; // współrzędna y
  11. var x2 = 120; // współrzędna x końca łuku
  12. var y2 = 40; // współrzędna y końca łuku
  14. var ray = 20; // promień okręgu
  16. ctx.moveTo(20, 20);
  17. ctx.lineTo(x1 - ray, y1);
  19. ctx.arcTo(x1, y1, x2, y2, ray); // tworzenie ścieżki rysowania
  20. ctx.lineTo(120, 80);
  22. ctx.fill(); // wypełnienie ścieżki rysowania
  23. 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:

Listing 7
  1. ctx.beginPath();
  3. ctx.moveTo(10, 10);
  4. ctx.lineTo(110,10);
  5. ctx.lineTo(60, 60);
  7. ctx.closePath();
  9. ctx.fill();
  10. 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ą.

Listing 8
  1. var canvas = document.getElementById("quadraticCurveTo");
  2. var ctx = canvas.getContext("2d");
  4. ctx.beginPath();
  5. ctx.moveTo(10, 10);
  6. ctx.quadraticCurveTo(60, 60, 110, 10);
  7. ctx.stroke();
  9. ctx.fillStyle = 'blue';
  11. ctx.fillStyle = 'red';
  12. 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:

Komentarze