
Opublikowaliśmy już podstawowy kurs HTML5, który dał solidne podstawy do nauki (lub przypomnienia pewnych zagadnień). Daję one możliwość szybkiego pójścia naprzód i zgłębiania kolejnych tematów. Samą naukę HTML5, jak i tworzenie konkretnych rozwiązań, najlepiej rozłożyć na mniejsze części i opracowywać krok po kroku.
Dalsza nauka HTML5 Canvas
Nauka idzie świetnie poprzez realizację konkretnych przykładów. Zatem do dzieła!
Stwórzmy sobie szablon, w którym będziemy uruchamiać testowy kod:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script type="application/javascript"> function draw() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // TUTAJ wklejamy kod ... } </script> </head> <body onload="draw()"> <canvas id="canvas" width="500" height="300" style="border: solid 1px;"></canvas> </body> </html>
Na sam początek: ścieżki i rysowanie linii prostych. Używamy dwóch funkcji:
moveTo(x, y) – określa punkt początkowy linii,
lineTo(x, y) – określa się punkt końcowy linii.
Przykład 1 – rysowanie linii:
// ... ctx.moveTo(0, 0); ctx.lineTo(300, 150); // ustaw kolor linii ctx.strokeStyle = '#0000ff'; ctx.stroke();
Określamy parametry linii, w tym jej kolor. Po wklejeniu tego kodu do szablonu powinniśmy zobaczyć następujący efekt:
Prosto i przyjemnie.
Idąc dalej, zobaczmy jak narysować prostokąt i okrąg.
Do narysowania prostokąta używamy metody rect(x, y, w, h).
Przykład 2 – rysowanie prostokąta:
// ... ctx.beginPath(); ctx.rect(20, 20, 250, 150); ctx.fillStyle = '#000000'; ctx.fill(); ctx.lineWidth = 3; ctx.strokeStyle = '#0000ff'; ctx.stroke();
Określiliśmy dodatkowe parametry, takie jak kolor wypełnienia i kolor oraz grubość obramowania. Efekt:
Natomiast w celu narysowania okręgu używa się metody arc(x, y, r, start, stop).
Przykład 3 – rysowanie okręgów na HTML5 Canvas:
// #1 ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.stroke(); // #2 ctx.beginPath(); ctx.arc(380, 100, 50, 0, 2 * Math.PI); ctx.stroke();
W tym przykładzie narysowaliśmy dwa okręgi, wyglądające tak:
Tekst a HTML5 Canvas
Co by nam przyszło z Canvas, gdyby nie można było wypisać na nim tekstu. Na szczęście jest to dość proste.
Najważniejszymi metodami i parametrami, ustawianymi dla kontekstu, są w tym przypadku:
font – definiujemy ustawienia czcionki dla teksu, który chcemy wypisać,
fillText(text, x, y) – rysuje wypełniony tekst na zadanej pozycji,
strokeText(text, x, y) – rysuje tekst, bez wypełnienia.
Przykład 4 – własny tekst na HTML5 Canvas:
// ... ctx.font = "32px Verdana"; ctx.fillText("Nauka HTML5 Canvas", 5, 40);
Przykład wyświetla tekst wypełniony, poniższy kod natomiast:
// ... ctx.font = "32px Verdana"; ctx.strokeText("Nauka HTML5 Canvas", 5, 40);
wyświetla tekst niewypełniony:
HTML5 Canvas i tworzenie gradientu
Gradienty używane są od wypełniania innych obiektów (kształtów) graficznych, zwykle tam gdzie nie chcemy stałych, jednolitych kolorów.
Możemy stworzyć gradient liniowy:
createLinearGradient(x, y, x1, y1)
lub też „kołowy”:
createRadialGradient(x, y, r, x1, y1, r1).
Następnie należy określić przejścia kolorów / color stops. Do tego celu używamy metody addColorStop().
Przykład 5 – gradient:
// ... var g = ctx.createLinearGradient(0, 0, 200, 0); g.addColorStop(0, "blue"); g.addColorStop(1, "white"); // wypełnij gradientem ctx.fillStyle = g; ctx.fillRect(10, 10, 200, 100);
A oto rezultat:
Prosty wykres
Jako przykład praktyczny na zakończenie, stworzymy prosty wykres słupkowy.
Po prostu zdefiniujemy dane wejściowe i pętlę, która po nich przechodzi rysując odpowiednio wysokie słupki.
Przykład 6 – wykres słupkowy:
// ... // dane wejściowe var inputData = [99, 60, 20, 10, 10, 70, 125, 100]; var canvasWidth = 500; // miejsce, od którego zaczynamy rysowanie var x_from = 40; // co ile - odległość między słupkami var step = Math.round(canvasWidth / inputData.length) - 5; for (var i = 0; i < inputData.length; i++) { // pozycja x następnego słupka var x_next = x_from + (i * step) - 20; // rysowanie słupka... ctx.fillStyle = "rgba(50, 150, 250, 1)"; ctx.fillRect(x_next, 150, 40, -inputData[i]); // oraz jego cienia ctx.fillStyle = "rgba(10, 10, 50, 0.4)"; ctx.fillRect(x_next, 150, 45, -inputData[i]); }
Oto wynik końcowy:
A dla dociekliwych – polecane zasoby:
– Canvas reference na W3Schools:
http://www.w3schools.com/tags/ref_canvas.asp
– Przykłady praktyczne z krótkim komentarzem:
http://www.tutorialspoint.com/html5/html5_canvas.htm
Nauka HTML5 Canvas – podsumowanie
Na tym kończymy dzisiejszy artykuł. Wkrótce kolejny tego typu; w końcu nauka to także ciągłe praktykowanie i eksperymentowanie, do czego oczywiście zachęcam.