Zakończenia linii (HTML5 canvas)

Zakończenia linii

Właściwość lineCap służy do określenia kształtu zakończenia linii. Właściwość 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();