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>
Lupa

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.



© medianauka.pl, 2018-07-10, ART-3566

 




Niektóre treści nie są dostosowane do Twojego profilu. Jeżeli jesteś pełnoletni możesz wyrazić zgodę na przetwarzanie swoich danych osobowych. W ten sposób będziesz miał także wpływ na rozwój naszego serwisu.
© Media Nauka 2008-2018 r.