Grudzień 4th, 2013 
Dominik-W 
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:
HTML5 Canvas: linia
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:
HTML5 Canvas: rectangle
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:
HTML5 Canvas: circle
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: rendering tekstu
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:
HTML5 Canvas: gradient
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:
HTML5 Canvas: wykres
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.
Opublikowano w 
Tags: 
