De closePath-methode

De methode closePath sluit automatisch een vorm die getekend is met de methode lineTo, door een rechte lijn te tekenen van het eindpunt naar het startpunt. Als de vorm al gesloten was of slechts een enkel punt is, dan doet de methode niets.

Syntaxis

javascriptcontext.closePath();

Voorbeeld

Laten we eerst twee lijnen tekenen zonder ze te sluiten via 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();

Результат:

Voorbeeld

En laten we nu deze twee lijnen sluiten tot een vorm via closePath, zodat we een driehoek krijgen:

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(); // sluit de lijnen tot een vorm
ctx.stroke();

Результат:

Voorbeeld

Laten we een vierkantje tekenen, waarbij we in plaats van de laatste lijn de vorm sluiten via 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(); // sluit de lijnen tot een vorm
ctx.stroke();

Результат:

Zie ook