rect ක්‍රමය

rect ක්‍රමය ලබාදී ඇති ලක්ෂ්‍යයක සෘජුකෝණාස්රයක් අඳී. stroke හෝ fill ක්‍රම යෙදූ විට පමණක් මෙම සෘජුකෝණාස්රය දෘශ්‍යමාන වේ. පළමු අවස්ථාවේ එය රේඛා පරිහරණයක් වන අතර දෙවන අවස්ථාවේ - පුරවන රූපයක්.

වාක්‍ය ඛණ්ඩය

javascriptcontext.rect(x, y, පළල, උස)

උදාහරණය

rect භාවිතයෙන් රේඛා පරිහරණයක් අඳිමු:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 75);
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.rect(50, 50, 100, 75);
ctx.fill();

Результат:

ආශ්‍රිත

  • fillRect ක්‍රමය,
    පිරවූ සෘජුකෝණාස්රයක් අඳින
  • strokeRect ක්‍රමය,
    සෘජුකෝණාස්රයක රේඛා පරිහරණය අඳින