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);
            

Dodaj komentarz

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