Метод closePath

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

Синтаксис

контекст.closePath();

Мисол

Бошлаш учун, иккита чизиқни 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();

Мисол

Энди бу икки чизиқни 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.closePath(); // чизиқларни шаклга ёпамиз
ctx.stroke();

Мисол

Келтинг, квадрат чизайлик, ўрнига охирги чизиқни 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(); // чизиқларни шаклга ёпамиз
ctx.stroke();

Қараш мумкин

fill методи,
берылган ранг билан шаклни бўёйди