JavaScript හරහා canvas මත අතිරේක අඳින ආකාරය
චතුරස්ර සහ අතිරේක අනිවාර්යයෙන්ම
moveTo, lineTo වල සංයෝග භාවිතයෙන්
ඇඳීමට අවශ්ය නැත - මේ සඳහා සරල ක්රම ද ඇත.
අපි ඒවා විමසා බලමු.
strokeRect ක්රමය
strokeRect(x, y, පළල,
උස) ක්රමය නිශ්චිත ලක්ෂ්යයක අතිරේකයක
ගැටලුව අඳී. පළමු පරාමිති දෙක නිරූපණය කරන අතිරේකයේ
වම් ඉහළ කොන පිහිටා ඇති ලක්ෂ්යයේ ඛණ්ඩාංක සකසයි.
අපි strokeRect භාවිතයෙන් අතිරේකයක් අඳිමු
(ctx දැනටමත් ඇතැයි සිතමු):
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.strokeRect(50, 50, 100, 75);
:
fillRect ක්රමය
fillRect(x, y, පළල, උස)
ක්රමයද strokeRect වැනිව ක්රියා කරයි,
නමුත් වර්ණයෙන් පුරවන ලද අතිරේකයක් අඳී.
උදාහරණයක් බලමු:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 75);
:
rect ක්රමය
ඊළඟ ක්රමය වන rect(x, y, පළල,
උස) ද අතිරේකයක් අඳී. නමුත්
මෙම අතිරේකය දෘශ්යමාන වන්නේ,
stroke හෝ fill ක්රමය යෙදූ විට පමණි.
පළමු අවස්ථාවේ එය ගැටලුවක් වන අතර දෙවන අවස්ථාවේ
- එය රූපයක් වේ.
rect භාවිතයෙන් ගැටලුවක් අඳිමු:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.stroke();
:
දැන් රූපයක් අඳිමු:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.fill();
:
clearRect ක්රමය
ඊළඟ ක්රමය වන clearRect(x, y,
පළල, උස) මකන ලදක් ලෙස ක්රියා කර,
අතිරේකාකාර කලාපයක් පිරිසිදු කර
අන්තර්ගතය සම්පූර්ණයෙන් පාරදෘෂ්ය කරයි.
අපි fillRect භාවිතයෙන් කුඩා චතුරස්රයක් අඳිමු
සහ clearRect භාවිතයෙන් එහි කොටසක් මකමු:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);
:
