A closePath metódus

A closePath metódus automatikusan bezárja a lineTo metódussal megrajzolt alakzatot, miközben egyenes vonalat húz a végpontból a kezdőpontba. Ha az alakzat már zárt volt vagy csak egy pont, akkor a metódus nem csinál semmit.

Szintaxis

kontextus.closePath();

Példa

Először rajzoljunk két vonalat, anélkül, hogy bezárnánk őket a closePath segítségével:

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

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

Példa

Most pedig zárjuk be ezt a két vonalat egy alakzattá a closePath segítségével, ezzel egy háromszöget kapva:

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

let 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(); // vonalak bezárása alakzattá
ctx.stroke();

Példa

Rajzoljunk egy négyzetet, az utolsó vonal helyett az alakzatot a closePath segítségével zárjuk be:

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

let 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(); // vonalak bezárása alakzattá
ctx.stroke();

Lásd még

a fill metódus,
amely kitölti az alakzatot egy megadott színnel