Metoden closePath

Metoden closePath stänger automatiskt en figur som ritats med metoden lineTo genom att rita en rak linje från slutpunkten till startpunkten. Om figuren redan är stängd eller bara är en punkt, så gör metoden ingenting.

Syntax

javascriptcontext.closePath();

Exempel

Låt oss först rita två linjer utan att stänga 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();

Результат:

Exempel

Och nu stänger vi dessa två linjer till en figur med closePath, och får därmed en triangel:

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(); // stänger linjerna till en figur
ctx.stroke();

Результат:

Exempel

Låt oss rita en kvadrat, och istället för den sista linjen stänga 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(); // stänger linjerna till en figur
ctx.stroke();

Результат:

Se även