closePath ක්‍රමය

closePath ක්‍රමය ස්වයංක්‍රීයව lineTo ක්‍රමය භාවිතයෙන් අඳින ලද රූපය වසා දමයි, අවසාන ලක්ෂ්‍යයෙන් ආරම්භක ලක්ෂ්‍යය දක්වා සරල රේඛාවක් අඳිමින්. රූපය දැනටමත් වසා ඇති නම් හෝ පහසුවෙන් ලක්ෂ්‍යයක් නම්, මෙම ක්‍රමය කිසිවක් නොකරයි.

වාක්‍ය රචනය

javascriptcontext.closePath();

උදාහරණය

පළමුව, closePath හරහා වසා නොදමා රේඛා දෙකක් අඳිමු:

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

Результат:

උදාහරණය

දැන් අපි මෙම රේඛා දෙක closePath හරහා රූපයකට වසා දමමු, එමගින් ත්‍රිකෝණයක් ලබා ගනිමු:

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(); // රේඛා රූපයකට වසා දමයි
ctx.stroke();

Результат:

උදාහරණය

අපි කොටුවක් අඳිමු, අවසාන රේඛාව වෙනුවට රූපය closePath හරහා වසා දමමු:

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(); // රේඛා රූපයකට වසා දමයි
ctx.stroke();

Результат:

මෙයද බලන්න