Zakończenia linii

Właściwość lineCap służy do okreśenia kształtu zakończenia
linii. Właściwośc ta jest ustawiana dla kontekstu i obowiązuje aż do zmiany.

Linie na canvas mogą mieć trzy zakończenia:

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

Pierwsze zakończenie określane jest jako ‘butt’.

Drugie zakończenie jest określane jako ‘square’.

Trzecie zakończenie jest określane jako ’round’.

Sposób zakończenia linii jest szczególnie istotny przy łączeniu linii.

Listing

	var cv = document.getElementById("canvas");
	var ctx = cv.getContext("2d");
	//-		
	 ctx.beginPath();	
	 ctx.moveTo(100, 100);
	 ctx.lineTo(300, 100);
	 ctx.lineWidth = 10;
	 ctx.strokeStyle = "#0000ff";
	 ctx.lineCap = "butt";
	 ctx.stroke();		
	//-
	 ctx.beginPath();	
	 ctx.moveTo(100, 150);
	 ctx.lineTo(300, 150);
	 ctx.lineWidth = 10;
	 ctx.strokeStyle = "#0000ff";
	 ctx.lineCap = "square";
	 ctx.stroke();		
	//-
	 ctx.beginPath();	
	 ctx.moveTo(100, 200);
	 ctx.lineTo(300, 200);
	 ctx.lineWidth = 10;
	 ctx.strokeStyle = "#0000ff";
	 ctx.lineCap = "round";
	 ctx.stroke();			
            

Dodaj komentarz

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