Méthode closePath

La méthode closePath ferme automatiquement une forme dessinée avec la méthode lineTo, en traçant une ligne droite du point final au point initial. Si la forme était déjà fermée ou n'est qu'un point, la méthode ne fait rien.

Syntaxe

javascriptcontexte.closePath();

Exemple

Pour commencer, dessinons deux lignes sans les fermer 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();

Результат:

Exemple

Et maintenant, fermons ces deux lignes en une forme via closePath, obtenant ainsi un triangle :

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(); // on ferme les lignes en une forme
ctx.stroke();

Результат:

Exemple

Dessinons un carré, en fermant la forme via closePath au lieu de tracer la dernière ligne :

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(); // on ferme les lignes en une forme
ctx.stroke();

Результат:

Voir aussi