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
konteksts.closePath();
Piemērs
Vispirms uzzīmēsim divas līnijas, tās neaizverot
ar closePath:
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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:
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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:
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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ī
-
metode
fill,
kura aizpilda figūru ar norādīto krāsu
