closePath ක්රමය
closePath ක්රමය ස්වයංක්රීයව
lineTo ක්රමය භාවිතයෙන් අඳින ලද
රූපය වසා දමයි, අවසාන ලක්ෂ්යයෙන්
ආරම්භක ලක්ෂ්යය දක්වා සරල රේඛාවක් අඳිමින්.
රූපය දැනටමත් වසා ඇති නම් හෝ
පහසුවෙන් ලක්ෂ්යයක් නම්, මෙම ක්රමය කිසිවක්
නොකරයි.
වාක්ය රචනය
context.closePath();
උදාහරණය
පළමුව, closePath හරහා වසා නොදමා
රේඛා දෙකක් අඳිමු:
<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();
:
උදාහරණය
දැන් අපි මෙම රේඛා දෙක closePath හරහා රූපයකට වසා දමමු,
එමගින් ත්රිකෝණයක් ලබා ගනිමු:
<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(); // රේඛා රූපයකට වසා දමයි
ctx.stroke();
:
උදාහරණය
අපි කොටුවක් අඳිමු, අවසාන රේඛාව වෙනුවට
රූපය closePath හරහා වසා දමමු:
<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(); // රේඛා රූපයකට වසා දමයි
ctx.stroke();
:
මෙයද බලන්න
-
fillක්රමය,
එය රූපයක් දී ඇති වර්ණයකින් පුරවයි
