HTML5 Canvas - style wypełnienia

Wiemy już jak na obiekcie Canvas rysować różnego rodzaju kształty. Teraz czas je wypełnić. Możemy stosować kilka różnych stylów wypełnienia kształtu.

Rysowanie wypełnień

Aby zastosować wypełnienie dla rysowanego kształtu, należy użyć metody:

context.fill();

Metoda ta stosuje wypełnienie określone zdefiniowany style. Styl definiujemy za pomocą właściwości:

context.fillStyle;

Właściwość fillStyle może przyjmować właściwości:

kolor - wartość domyślna to #000000;
gradient - obiekt przechowujący definicję gradientu liniowego lub radialnego;
pattern - obiekt przechowujący wzór wypełnienia;

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.

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

Gradienty

Poniżej opisujemy w jaki sposób wykorzystujemy w HTML Canvas gradienty

Gradient liniowy

W celu zdefiniowania gradientu liniowego używamy metody:

var zmienna=context.createLinearGradient(x_pocz,y_pocz,x_koniec,y_koniec);

gdzie współrzędne początku i końca definiują początek i koniec zmienności koloru tła.

Pomiędzy tymi punktami definiujemy kolory przy użyciu metody:

zmienna.addColorStop(przesunięcie,kolor);

gdzie przesunięcie oznacza liczbę 0 dla początku gradientu, 1 - dla końca gradientu, dowolna liczba pomiędzy 0 a 1 oznacza względne położenie kolejnego koloru, zdefiniowanego za pomocą parametru kolor.

Gradient kołowy (radialny)

W celu zdefiniowania gradientu liniowego używamy metody:

var zmienna=context.createRadialGradient(x_pocz,y_pocz,r1,x_koniec,y_koniec,r2);

gdzie współrzędne x,y początku definiują pierwsze koło o promieniu r1 gradientu a x_koniec,y_koniec oznaczają współrzędne okręgu o promieniu r2 określającego koniec zmienności koloru tła w układzie radialnym.

Pomiędzy tymi punktami definiujemy kolory przy użyciu metody:

zmienna.addColorStop(przesunięcie,kolor);

Wzór wypełnienia - Pattern

W celu zdefiniowania wzoru wypełnienia używamy metody:

var zmienna=context.createPattern(obraz, opcje);

gdzie obraz to obiekt przechowujący grafikę, a opcje opisują sposób w jaki ma być wypełniony kształt. Mamy następujące możliwości:

repeat: wzorzec ma być powielany we wszystkich kierunkach;
repeat-x: wzorzec ma być powielany w poziomie;
repeat-y: wzorzec ma być powielany w pionie;
no-repeat: pojedyncze wystąpienie wzorca;

Przykład - wypełnienie

Oto przykład rysowania własnego kształtu z różnym wypełnieniem:

<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,10,80,"pink");
		ksztalt(context,110,80,"#ccc"); 
		ksztalt(context,210,80,"#A422C8");
		
		grd1 = context.createLinearGradient(70,160,70,280);
		grd1.addColorStop(0,"#004455");
		grd1.addColorStop(1,"#ff9999");
		ksztalt(context,10,220,grd1);

		grd2 = context.createRadialGradient(150,220,10,150,220,50);
		grd2.addColorStop(0,"#66aaaa");
		grd2.addColorStop(1,"#ff9999");
		ksztalt(context,110,220,grd2);

		var obrazObj = new Image();
		obrazObj.onload = function(){
			var pattern = context.createPattern(obrazObj,"repeat");
			ksztalt(context,210,220,pattern);
		}
		obrazObj.src="grafika/ikona-biologia.gif";
	};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid black;">
</canvas>
</body>
</html>