Metod closePath

closePath metodi lineTo metodi yordamida chizilgan shaklni avtomatik ravishda yopadi, bunda oxirgi nuqtadan boshlang'ich nuqtaga to'g'ri chiziq chizadi. Agar shakl allaqachon yopilgan bo'lsa yoki oddiy nuqtadan iborat bo'lsa, metod hech narsa qilmaydi.

Sintaksis

kontekst.closePath();

Misol

Boshlanishiga closePath orqali yopmasdan ikki chiziq chizamiz:

<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();

Misol

Endi esa bu ikkala chiziqni closePath orqali yopib, shu bilan uchburchak hosil qilamiz:

<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(); // chiziqlarni shaklga yopamiz
ctx.stroke();

Misol

Keling, kvadrat chizaylik, so'nggi chiziq o'rniga shaklni closePath orqali yopamiz:

<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(); // chiziqlarni shaklga yopamiz
ctx.stroke();

Shuningdek qarang

fill metodi,
shaklni berilgan rang bilan to'ldiradi