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

javascriptkontekst.closePath();

Misol

Boshlanishiga closePath orqali yopmasdan ikki chiziq chizamiz:

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

Результат:

Misol

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

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

Результат:

Misol

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

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

Результат:

Shuningdek qarang