Metode closePath

Metode closePath automātiski aizver figūru, kas uzzīmēta, izmantojot metodi lineTo, uzzīmējot taisnu līniju no beigu punkta uz sākuma punktu. Ja figūra jau ir aizvērta vai ir tikai punkts, tad metode neko nedara.

Sintakse

javascriptkonteksts.closePath();

Piemērs

Vispirms uzzīmēsim divas līnijas, tās neaizverot ar 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();

Результат:

Piemērs

Tagad aizveram šīs divas līnijas figūrā ar closePath, iegūstot trijstūri:

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(); // aizveram līnijas figūrā
ctx.stroke();

Результат:

Piemērs

Uzzīmēsim kvadrātu, pēdējās līnijas vietā aizverot figūru ar 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(); // aizveram līnijas figūrā
ctx.stroke();

Результат:

Skatiet arī