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

Autor podstrony: Krzysztof Zajączkowski

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

Zmianę powyższych właściwości umożliwiają następujące pola klasy i metody kontekstu rysowania:

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:

Propozycje książek
tytuł: JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera  autor: Jon Duckett

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 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 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ł:

JavaScript dla dzieci dla bystrzaków

Autor:

Chris Minnick, Eva Holland

tytuł: Modularny JavaScript dla zaawansowanych autor: Nicolas Bevacqua

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ł:

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ł:

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ł:

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ł:

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

Tytuł:

JavaScript i wzorce projektowe. Programowanie dla zaawansowanych. Wydanie II

Autor:

Simon Timms

W związku z tym, że firma Helion nie wywiązuje się z swoich zobowiązań naliczania prowizji za każdą zakupioną książkę a kontakt z ową frmą jest nie możliwy autor strony zmuszony został do zablokowania linkowania książek. Za wszelkie niedogodności z tym związane z góry przepraszam i obiecuję włączenie linkowania gdy tylko sprawa zostanie wyjaśniona