Metoden closePath

Metoden closePath lukker automatisk en figur, der er tegnet med metoden lineTo, ved at tegne en lige linje fra slutpunktet til startpunktet. Hvis figuren allerede er lukket eller kun er et enkelt punkt, gør metoden ingenting.

Syntaks

javascriptkontekst.closePath();

Eksempel

Lad os starte med at tegne to linjer uden at lukke dem med closePath:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();

Результат:

Eksempel

Lad os nu lukke disse to linjer til en figur med closePath og derved opnå en trekant:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.closePath(); // lukker linjerne til en figur
ctx.stroke();

Результат:

Eksempel

Lad os tegne en firkant, og i stedet for den sidste linje lukke figuren med closePath:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath(); // lukker linjerne til en figur
ctx.stroke();

Результат:

Se også