Metod closePath

Metod closePath awtomatiki usulda lineTo metody bilen çyzylan şekli ýapýar, soňky nokatdan başlangyç nokada çenli göni çyzygy çyzýar. Eger şekil eýýäm ýapylan bolsa ýa-da diňe bir nokat bolsa, onda metod hiç zat etmeýär.

Sintaksis

javascriptkontekst.closePath();

Mysal

Ilki bilen, iki sany çyzygy closePath arkaly ýapmazdan çyzalyň:

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

Результат:

Mysal

Indi bolsa, bu iki çyzygy closePath arkaly şekilde ýapalyň, şeýlelik bilen üçburçlyk alyň:

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(); // çyzyklary şekilde ýapýarys
ctx.stroke();

Результат:

Mysal

Gelmişiňizde, inedördül şekil çyzalyň, iň soňky çyzygyň ýerine şekli closePath arkaly ýapalyň:

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(); // çyzyklary şekilde ýapýarys
ctx.stroke();

Результат:

Şeýle hem serediň