Przycinanie

Przycinanie jest operacją określającą, co na obrazie będzie
widoczne, a co nie będzie widoczne.

Wszystko co narysowane zostanie przed operacją maskowania – będzie
widoczne ‘pod spodem’ i nie będzie maskowane (zielone koło).

Operacją rysowania na ostatniej ścieżce otwartej przed wydaniem polecenia
clip()
służy do ustalenia obszaru przycięcia (obszaru maski). Obszar widoczny
(otwór maski) to obszar będący przecięciem (iloczynem logicznym)
obszaru canvas i obszaru wyznaczanego przez ostatnią ścieżkę (w
przykładzie jest to obszar koła). Reszta canvas jest niewidoczna.

Wszystko co narysujemy po wydaniu polecenia
clip()
, a przed
restore()
będzie rysowane (pomarańczowy napis) na canvas pod maską (widoczne lub nie – część niewidoczna
nie jest tak naprawdę rysowana).

Jeśli chcemy rysować ‘na wierzchu’ (niebieski okrąg) musimy odtworzyć stan canvas przed
wydaniem polecenia
save().

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Listing

	var cv = document.getElementById("canvas");
	var ctx = cv.getContext("2d");
	var x = 250;
	var y = 250;
	var radius = 75;		
	ctx.fillStyle="green";
	ctx.arc(x-100, y-30, radius, 0, 2 * Math.PI, false);
	ctx.fill();
	ctx.save();
	ctx.beginPath();
	ctx.arc(x, y, radius, 0, 2 * Math.PI, false);		
	ctx.clip();
	ctx.beginPath();
	ctx.fillStyle = "orange";
	ctx.font = "70px sans-serif";
	ctx.fillText("Urszula", 100, 250);
	ctx.restore();
	ctx.beginPath();
	ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
	ctx.lineWidth = 3;
	ctx.strokeStyle = "blue";
	ctx.stroke();	
            

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *