lineTo ක්‍රමය

lineTo ක්‍රමය ලක්ෂ්‍යයක සිට ලක්ෂ්‍යයකට රේඛාවක් අඳියි. රේඛාව අඳින කලමයේ වර්තමාන ස්ථානයෙන් නියම කරන ලද ඛණ්ඩාංක වලට අඳිනු ලැබේ. ක්‍රමයේ පරාමිතීන් මගින් ඛණ්ඩාංක නියම කරනු ලැබේ.

වාක්‍ය රීතිය

javascriptcontext.lineTo(x, y);

උදාහරණය

අපි රේඛාවක් අඳිමු:

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

Результат:

උදාහරණය

අපි කුඩා චතුරස්‍රයක් අඳිමු:

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.lineTo(50, 50);
ctx.stroke();

Результат:

මෙයද බලන්න

  • moveTo ක්‍රමය,
    එය අඳින කලමය ගෙනයාම සිදු කරයි
  • closePath ක්‍රමය,
    එය රේඛා රූපයකට වසා දමයි
  • lineWidth ගුණාංගය,
    එය රේඛාවේ ඝණකම සකසයි
  • lineJoin ගුණාංගය,
    එය රේඛාවේ බැඳීමේ විලාසය සකසයි