HTML5 Canvas - kształty

Na obiekcie Canvas można rysować różnego rodzaju kształty. Mogą to być prostokąty, elipsy i okręgi oraz dowolne inne figury. Kształty można wypełniać różnymi kolorami, gradientami, używać kanału alfa a także predefiniowanych operacji złożonych. Zaczniemy od prostokąta:

Rysowanie prostokąta

Aby narysować na obiekcie Canvas prostokąt należy użyć metody:

context.rect(x,y,szerokosc,wysokosc);

Metoda ta rysuje prostokąt w punkcie (x,y) o zadanej parametrami wysokości i szerokości.

Przykład - prostokąt

Oto przykład rysowania prostokąta:

<html>
<head>
<script>
	window.onload = function(){
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");
		context.lineWidth=15;
		context.strokeStyle = "#AA0000";
		context.rect(50,50,200,150);
		context.stroke();
	};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid black;">
</canvas>
</body>
</html>

Aby narysować na obiekcie Canvas wypełniony prostokąt, należy użyć metody:

context.fillRect(x,y,szerokosc,wysokosc);

Metoda ta wymaga zdefiniowania wcześniej stylu wypełnienia.

Przykład - wypełniony prostokąt

Oto przykład rysowania prostokąta:

<html>
<head>
<script>
	window.onload = function(){
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");
		context.lineWidth=15;
		context.strokeStyle = "#AA0000";
		context.rect(50,50,200,150);
		context.stroke();
	};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid black;">
</canvas>
</body>
</html>

Istnieje jeszcze metoda:

context.strokeRect(x,y,szerokosc,wysokosc);

Metoda ta rysuje prostokąt bez konieczności używania metody stroke().

Nie ma analogicznej metody dla wypełnionego prostokąta.

Rysowanie okręgu i koła

Aby narysować na obiekcie Canvas okrąg należy użyć metody:

context.arc(x,y,r,0,2*Math.PI,false);

Zauważ, że jest to szczególny przypadek rysowania łuku. Należy pamiętać, że przed użyciem tej metody należy użyć stylu wypełnienia (włąściwość context.fillStyle).

Przykład - koło i okrąg

Oto przykład rysowania koła i okręgu:

<html>
<head>
<script>
	window.onload = function(){
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");
		context.arc(150,150,100,0,Math.PI*2,false);
		context.fillStyle = "yellow";
		context.fill();
		context.lineWidth = 5;
		context.strokeStyle = "red";
		context.stroke();
	};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid black;">
</canvas>
</body>
</html>

UWAGA! W powyższym przykładzie użyliśmy metody:

context.fill();

Zastosowanie tej metody oraz właściwości context.fillStyle; umożliwia rysowanie kształtów z funkcją ich wypełnienia przez określony styl. Jeżeli nie użyjemy w powyższym przykładzie obu komend dla wypełnień, otrzymamy okrąg, a nie koło.

Istotną kwestią jest kolejność stosowania w powyższym kodzie tych instrukcji. Używamy ich przed metodą stroke(); i najlepiej po metodzie rysującej kształt.

O wypełnieniach kształtów napiszę więcej w kolejnym artykule kursu.

Rysowanie własnych kształtów

W celu narysowania własnego i dowolnego kształtu użyjemy funkcji w JavaScript.

Przykład - własny kształt

Oto przykład rysowania własnego kształtu:

<html>
<head>
<script>
function ksztalt(context, x,y,fillStyle) {
		context.beginPath();
		context.moveTo(x,y);
		context.lineTo(x+40,y-40);
		context.lineTo(x+40,y+40);
		context.closePath();
		context.fillStyle=fillStyle;
		context.fill();
		context.strokeStyle="black"
		context.lineWidth=4;
		context.stroke();
}
	window.onload = function(){
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");
		ksztalt(context,100,100,"blue");
		ksztalt(context,150,220,"red");
		ksztalt(context,50,120,"green");
	};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid black;">
</canvas>
</body>
</html>