Njia closePath

Njia closePath inafunga otomatiki umbo liliyochorwa kwa kutumia njia lineTo, ikichora mstari wa moja kwa moja kutoka kwenye sehemu ya mwisho hadi sehemu ya mwanzo. Ikiwa umbo tayari limefungwa au ni sehemu moja tu, basi njia haifanyi chochote.

Syntax

javascriptmuktadha.closePath();

Mfano

Kwanza, tuchore mistari miwili, bila kufunga kupitia 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();

Результат:

Mfano

Sasa tufunge mistari hii miwili kuwa umbo kupitia closePath, na hivyo kupata pembetatu:

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(); // kufunga mistari kuwa umbo
ctx.stroke();

Результат:

Mfano

Wacha tuchore mraba, badala ya mstari wa mwisho tukifunga umbo kupitia 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(); // kufunga mistari kuwa umbo
ctx.stroke();

Результат:

Angalia Pia