Złączenia linii (HTML5 canvas)

Złączenia linii

Właściwość lineJoin jest ustawiana dla kontekstu i obowiązuje aż do zmiany.

Istnieją trzy sposoby łączenia linii okreśone jako ‘miter’, ’round’ i ‘bevel’.

Istnieje 9 możliwości wzajemnego użycia właściwości lineCap i lineJoin.

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");
			//-
			ctx.beginPath();
			ctx.moveTo(50, 150);
			ctx.strokeStyle = "#0000ff";
			ctx.lineTo(150, 150);
			ctx.lineTo(150, 50);
			ctx.lineWidth = 15;
			ctx.lineCap = "butt";
			ctx.lineJoin = "miter";
			ctx.stroke();
			//-
			ctx.beginPath();
			ctx.moveTo(200, 150);
			ctx.strokeStyle = "#0000ff";
			ctx.lineTo(300, 150);
			ctx.lineTo(300, 50);
			ctx.lineWidth = 15;
			ctx.lineCap = "butt";
			ctx.lineJoin = "round";
			ctx.stroke();
			//-
			ctx.beginPath();
			ctx.moveTo(350, 150);
			ctx.strokeStyle = "#0000ff";
			ctx.lineTo(450, 150);
			ctx.lineTo(450, 50);
			ctx.lineWidth = 15;
			ctx.lineCap = "butt";
			ctx.lineJoin = "bevel";
			ctx.stroke();
			//-
			ctx.beginPath();
			ctx.moveTo(50, 350);
			ctx.strokeStyle = "#0000ff";
			ctx.lineTo(150, 350);
			ctx.lineTo(150, 250);
			ctx.lineWidth = 15;
			ctx.lineCap = "square";
			ctx.lineJoin = "miter";
			ctx.stroke();
			//-
			ctx.beginPath();
			ctx.moveTo(200, 350);
			ctx.strokeStyle = "#0000ff";
			ctx.lineTo(300, 350);
			ctx.lineTo(300, 250);
			ctx.lineWidth = 15;
			ctx.lineCap = "square";
			ctx.lineJoin = "round";
			ctx.stroke();
			//-
			ctx.beginPath();
			ctx.moveTo(350, 350);
			ctx.strokeStyle = "#0000ff";
			ctx.lineTo(450, 350);
			ctx.lineTo(450, 250);
			ctx.lineWidth = 15;
			ctx.lineCap = "square";
			ctx.lineJoin = "bevel";
			ctx.stroke();
			//-
			ctx.beginPath();
			ctx.moveTo(50, 550);
			ctx.strokeStyle = "#0000ff";
			ctx.lineTo(150, 550);
			ctx.lineTo(150, 450);
			ctx.lineWidth = 15;
			ctx.lineCap = "round";
			ctx.lineJoin = "miter";
			ctx.stroke();
			//-
			ctx.beginPath();
			ctx.moveTo(200, 550);
			ctx.strokeStyle = "#0000ff";
			ctx.lineTo(300, 550);
			ctx.lineTo(300, 450);
			ctx.lineWidth = 15;
			ctx.lineCap = "round";
			ctx.lineJoin = "round";
			ctx.stroke();
			//-
			ctx.beginPath();
			ctx.moveTo(350, 550);
			ctx.strokeStyle = "#0000ff";
			ctx.lineTo(450, 550);
			ctx.lineTo(450, 450);
			ctx.lineWidth = 15;
			ctx.lineCap = "round";
			ctx.lineJoin = "bevel";
			ctx.stroke();
			//-
			ctx.beginPath();
			ctx.font = "normal 14pt Arial";
			ctx.fillText("miter", 100, 20);
			ctx.fillText("round", 250, 20);
			ctx.fillText("bevel", 400, 20);
			ctx.fillText("butt", 500, 100);
			ctx.fillText("square", 500, 300);
			ctx.fillText("round", 500, 500);
			ctx.scale(2, 2);