HTML5 Canvas

Słowo kluczowe Canvas oznacza płótno, czyli element strony, na którym można rysować. Element ten wprowadzono do języka HTML5 w 2004 roku (zrobiła to firma Apple). Dzięki temu projektantom stron WWW dano doskonałe i proste narzędzie do wykorzystania grafiki z użyciem języka JavaScript.

Canvas pozwala programistom na tworzenie efektów wizualnych, w tym animacji, bez korzystania z technologii Flash. Dzięki temu efekty pracy będą widoczne na większości urządzeń i w większości przeglądarek internetowych (o czym nie można powiedzieć w przypadku technologii Flash).

Szablon Canvas

Poniższy kod stanowi podstawowy szablon elementu Canvas.

<html>
<head>
<script>
	window.onload = function(){
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");
		// KOD RYSOWANIA
	};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300">
</canvas>
</body>
</html>

Zauważmy, że element Canvas jest tworzony wewnątrz dokumentu HTML, zaś kod implementujący grafikę jest umieszczany w nagłówku strony. Z poziomu języka JavaScript do elementu Canvas odnosimy się za pomocą atrybutu id, korzystając z metody document.getElementById(). Kontekst płótna uzyskuje się za pomocą wywołania canvas.getContext("2d"), przy czym "2d" oznacza płótno dwuwymiarowe. Możemy używać innych kontekstów, o czym będziemy pisać później.

Rysowanie linii

Poniższy kod odpowiada za rysowanie linii.

<html>
<head>
<script>
	window.onload = function(){
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");
		context.lineWidth = 10; // ustawienie szerokości linii na 10 pikseli
		context.strokeStyle = "red"; // ustawienie koloru linii na czerwony
		context.moveTo(canvas.width - 20,20); // ustawienie położenia kursora
		context.lineTo(20, canvas.height - 20); // narysowanie linii
		context.stroke(); // wyświetlenie linii
	};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid black;">
</canvas>
</body>
</html>

Rysowanie łuku

Aby narysować łuk używamy następującej składni:

context.arc(x,y,r,alfa1,alfa2,kierunek);

Oznaczenia:

x,y - współrzędne środka;
r - promień;
alfa1 - kąt początkowy (zaczyna się od wartości 0π z prawej strony okręgu);
alfa2 - kąt końcowy (kąty zmieniają się zgodnie z ruchem wskazówek zegara przez wartości 3/2 π,π itd.;
kierunek - wartość True/False oznacza kierunek zgodny lub przeciwny do ruchu wskazówek zegara.

Istnieje jeszcze inna metoda rysowania łuku z pomiędzy puntami kontrolnymi o współrzędnych (x1,y1) i (x2,y2):

context.arcTo(x1,y1,x2,y2,r);

Poniżej przykład:

<html>
<head>
<script>
	window.onload = function(){
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");
		context.lineWidth = 10; // ustawienie szerokości linii na 10 pikseli
		context.strokeStyle = "red"; // ustawienie koloru linii na czerwony
		context.arc(150,150,50,0.9*Math.PI, 1.9*Math.PI,false); // narysowanie łuku
		context.stroke(); // wyświetlenie obrazu
	};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid black;">
</canvas>
</body>
</html>

Rysowanie krzywej kwadratowej

Aby narysować krzywą kwadratową, która wygląda bardziej naturalnie niż łuk między dwoma punktami, używamy następującej składni:

context.quadraticCurveTo(x1,y1,x2,y2);

Oznaczenia:

x1,y1 - współrzędne punktu kontrolnego;
x2,y2 - współrzędne końca;

Należy pamiętać, aby przed użyciem tej metody przesunąć pisak do odpowiedniego punktu za pomocą metody context.moveTo. Jest to początkowy punkt krzywej. Punkt kontrolny "wygina" krzywą między punktem początkowym a końcowym.

Poniżej przykład:

<html>
<head>
<script>
	window.onload = function(){
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");
		context.lineWidth = 10; // ustawienie szerokości linii na 10 pikseli
		context.strokeStyle = "red"; // ustawienie koloru linii na czerwony
		context.moveTo(20,20); // ustawienie położenia kursora		
		context.quadraticCurveTo(50,200,280,280); // narysowanie łuku
		context.stroke(); // wyświetlenie obrazu
	};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid black;">
</canvas>
</body>
</html>

Rysowanie krzywej Béziera

Krzywa Béziera to krzywa parametryczna, co oznacza, że każdy jej punk jest pewną funkcją liczby rzeczywistej, będącej wspomnianym parametrem. Aby narysować krzywą Béziera, która daje nam większe możliwości niż łuk między dwoma punktami, używamy następującej składni:

context.bezierCurveTo(x1,y1,x2,y2,xk,yk);

Oznaczenia:

x1,y1 - współrzędne punktu kontrolnego 1;
x2,y2 - współrzędne punktu kontrolnego 2;
xk,yk - współrzędne końca krzywej;

Należy pamiętać, aby przed użyciem tej metody przesunąć pisak do odpowiedniego punktu za pomocą metody context.moveTo. Jest to początkowy punkt krzywej. Punkty kontrolne "wyginają" krzywą między punktem początkowym a końcowym.

Poniżej przykład:

<html>
<head>
<script>
	window.onload = function(){
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");
		context.lineWidth = 10; // ustawienie szerokości linii na 10 pikseli
		context.strokeStyle = "red"; // ustawienie koloru linii na czerwony
		context.moveTo(20,20); // ustawienie położenia kursora		
		context.bezierCurveTo(-10,220,220,50,280,280); // narysowanie łuku
		context.stroke(); // wyświetlenie obrazu
	};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid black;">
</canvas>
</body>
</html>