closePath մեթոդը

closePath մեթոդը ավտոմատ կերպով փակում է lineTo մեթոդով նկարված ֆիգուրը, միևնույն ժամանակ գծելով ուղիղ գիծ վերջնակետից դեպի սկզբնակետ: Եթե ֆիգուրն արդեն փակված էր կամ ուղղակես կետ է, ապա մեթոդը ոչինչ չի անում:

Շարահյուսություն

javascriptcontext.closePath();

Օրինակ

Սկզբից նկարենք երկու գիծ՝ առանց դրանք փակելու 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();

Результат:

Օրինակ

Իսկ այժմ փակենք այս երկու գծերը ֆիգուրի մեջ 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.closePath(); // փակում ենք գծերը ֆիգուրի մեջ
ctx.stroke();

Результат:

Օրինակ

Եկեք նկարենք քառակուսի՝ վերջին գծի փոխարեն փակելով ֆիգուրը 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(); // փակում ենք գծերը ֆիգուրի մեջ
ctx.stroke();

Результат:

Տես նաև