Nauka HTML5 Canvas i JavaScript - krok po kroku - javascript-html5-tutorial.pl

javascript-html5-tutorial.pl

Nauka HTML5 Canvas i JavaScript – krok po kroku

4 grudnia, 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.