Rysowanie na kanwie (canvas) prostych figur

W rozdziale:

Proste kształty

IE	Firefox	Safari	Chrome	Opera	iPhone	Android
7.0+^*	3.0+	3.0+	3.0+	10.0+	1.0+	1.0+
* Internet Explorer 7 i 8 wymagają dodatku zewnętrznej biblioteki explorercanvas. Internet Explorer 9 standardowo obsługuje kształty w elemencie `canvas`.

Każda kanwa jest na początku pusta. Nic ciekawego! Dlatego trzeba coś na niej narysować.

Kliknij, aby narysować coś na tej kanwie

Procedura obsługi zdarzenia onclick wywołuje poniższą funkcję:

function draw_b() {
  var b_canvas = document.getElementById("b");
  var b_context = b_canvas.getContext("2d");
  b_context.fillRect(50, 25, 150, 100);
}

Pierwszy wiersz tej funkcji nie zawiera niczego niezwykłego. Znajduje tylko element canvas w strukturze DOM.

Ale za nim znajduje się ten wyróżniony wiersz.

function draw_b() {
  var b_canvas = document.getElementById("b");
  var b_context = b_canvas.getContext("2d");
  b_context.fillRect(50, 25, 150, 100);
}

Każda kanwa ma kontekst rysunku, w którym wszystko sie odbywa. Po znalezieniu elementu canvas w drzewie DOM (przy użyciu metody document.getElementById() albo dowolnej innej), wywołuje się jego metodę getContext(). Metodzie tej musimy przekazać łańcuch "2d".

P: Czy istnieje kanwa 3D?
O: Na razie nie. Twórcy przeglądarek eksperymentują z własnymi API trójwymiarowych kanw, ale żadne z nich nie doczekało się standardu. W specyfikacji HTML5 zaznaczono, że „w przyszłości prawdopodobnie zostanie zdefiniowany kontekst 3D”.

Mamy więc już element canvas i jego kontekst rysunku. W kontekście rysunku zdefiniowane są wszystkie metody i własności dotyczące rysowania. Istnieje cała grupa własności i metod do rysowania prostokątów:

Wartością własności fillStyle może być kolor w formacie CSS, wzór albo gradient. (Więcej o gradientach dowiesz sie wkrótce). Domyślnie własność fillStyle definiuje jednolity czarny kolor, ale można to zmienić. Każdy kontekst rysunkowy pamięta swoje własności przez cały okres otwarcia strony, chyba że się je jakoś zresetuje.
Wywołanie fillRect(x, y, width, height) powoduje narysowanie prostokąta wypełnionego bieżącym kolorem wypełnienia.
Własność strokeStyle jest podobna do fillStyle — jej wartością może być kolor w formacie CSS, wzór lub gradient.
Wywołanie strokeRect(x, y, width, height) powoduje narysowanie prostokąta z obrysem o bieżącym stylu. Metoda strokeRect nie wypełnia wnętrza figury, tylko rysuje jej krawędzie.
Metoda clearRect(x, y, width, height) kasuje ustawienia pikseli w określonym prostokącie.

Pytanie do profesora Kodeckiego

P: Czy można „zresetować” kanwę?
O: Tak. Ustawienie szerokości lub wysokości elementu <canvas> powoduje skasowanie jego zawartości oraz przywrócenie domyślnych wartości wszystkich własności jego kontekstu rysunkowego. Nie trzeba nawet zmieniać szerokości. Wystarczy ustawić ją jeszcze raz na taką samą wartość, np.:
var b_canvas = document.getElementById("b");
b_canvas.width = b_canvas.width;

Wrócimy do poprzedniego przykładu kodu…

Rysowanie prostokąta:

var b_canvas = document.getElementById("b");
var b_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);

Metoda fillRect() rysuje prostokąt i wypełnia go bieżącym stylem wypełnienia, które jeśli nie zostanie zmienione jest czarne. Wymiary prostokąta określają położenie jego lewego górnego rogu (50, 25), szerokość (150) oraz wysokość (100). Aby to lepiej zrozumieć, przyjrzymy się dokładniej układowi współrzędnych kanwy.