Metod closePath

Metod closePath avtomatik olaraq lineTo metodu ilə çəkilmiş fiquru bağlayır, bu zaman son nöqtədən başlanğıc nöqtəyə düz xətt çəkir. Əgər fiqur artıq bağlanmışdırsa ya da sadəcə nöqtədirsə, metod heç nə etmir.

Sintaksis

kontekst.closePath();

Nümunə

Əvvəlcə closePath ilə bağlamadan iki xətt çəkək:

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

Nümunə

İndi isə bu iki xətti closePath ilə fiqurda bağlayaq və üçbucaq əldə edək:

<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(); // xətləri fiqurda bağlayırıq
ctx.stroke();

Nümunə

Gəlin kvadrat çəkək, son xətt əvəzinə fiquru closePath ilə bağlayaq:

<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(); // xətləri fiqurda bağlayırıq
ctx.stroke();

Həmçinin bax

metod fill,
hansı ki, fiquru verilmiş rənglə doldurur