HTML5 Canvas - przeźroczystość

Wiemy już jak na obiekcie Canvas rysować różnego rodzaju kształty. Można stosować dla nich różne poziomy przeźroczystości, czyli przypisywać im kanały alfa.

Aby zastosować przeźroczystość dla rysowanego kształtu, należy użyć właściwości:

context.globalAlpha = wartość;

gdzie wartość to liczba z zakresu 0 i 1. Liczba 0 określa całkowitą przeźroczystość, liczba 1 zaś brak przeźroczystości.

Przykład - wypełnienie

Oto przykład rysowania własnego kształtu z określeniem poziomu przeźroczystości:

<html>
<head>
<script>
function ksztalt(context, x,y,fillStyle) {
		context.beginPath();
		context.moveTo(x,y);
		context.lineTo(x+120,y-120);
		context.lineTo(x+120,y+120);
		context.closePath();
		context.fillStyle=fillStyle;
		context.fill();
		context.strokeStyle="black"
		context.lineWidth=2;
		context.stroke();
}
	window.onload = function(){
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");
		ksztalt(context,10,140,"pink");
		context.save();
		context.globalAlpha = 0.5;
		ksztalt(context,50,140,"#ccc");
		context.restore();
		ksztalt(context,90,140,"#A422C8");
	};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid black;">
</canvas>
</body>
</html>

Zastosowaliśmy tutaj przezroczystość tylko dla drugiego trójkąta. Jak to zrobiliśmy?

Użyliśmy tu metody context.save() dla zapisania stylu kontekstu do pamięci i metody context.restore() dla odczytania zapisanego stylu kontekstu. To tak, jakbyśmy określili zakres działania (widoczności) definiowanego stylu. W ten sposób możemy zagnieżdżać style.