Метод closePath

Метод closePath автомат равишда lineTo методи ёрдамида чизилган шаклни ёпади, бу ерда охирги нуқтадан бошланғич нуқтага тўғри чизиқ чизилади. Агар шакл аллақачон ёпилган бўлса ёки жуда оддий нуқта бўлса, у ҳолда метод ҳеч нарса қилмайди.

Синтаксис

javascriptконтекст.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();

Результат:

Қараш мумкин