JavaScript හරහා canvas මත අතිරේක අඳින ආකාරය

චතුරස්ර සහ අතිරේක අනිවාර්යයෙන්ම moveTo, lineTo වල සංයෝග භාවිතයෙන් ඇඳීමට අවශ්‍ය නැත - මේ සඳහා සරල ක්‍රම ද ඇත. අපි ඒවා විමසා බලමු.

strokeRect ක්‍රමය

strokeRect(x, y, පළල, උස) ක්‍රමය නිශ්චිත ලක්ෂ්‍යයක අතිරේකයක ගැටලුව අඳී. පළමු පරාමිති දෙක නිරූපණය කරන අතිරේකයේ වම් ඉහළ කොන පිහිටා ඇති ලක්ෂ්‍යයේ ඛණ්ඩාංක සකසයි.

අපි strokeRect භාවිතයෙන් අතිරේකයක් අඳිමු (ctx දැනටමත් ඇතැයි සිතමු):

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.strokeRect(50, 50, 100, 75);

Результат:

fillRect ක්‍රමය

fillRect(x, y, පළල, උස) ක්‍රමයද strokeRect වැනිව ක්‍රියා කරයි, නමුත් වර්ණයෙන් පුරවන ලද අතිරේකයක් අඳී. උදාහරණයක් බලමු:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.fillRect(50, 50, 100, 75);

Результат:

rect ක්‍රමය

ඊළඟ ක්‍රමය වන rect(x, y, පළල, උස) ද අතිරේකයක් අඳී. නමුත් මෙම අතිරේකය දෘශ්‍යමාන වන්නේ, stroke හෝ fill ක්‍රමය යෙදූ විට පමණි. පළමු අවස්ථාවේ එය ගැටලුවක් වන අතර දෙවන අවස්ථාවේ - එය රූපයක් වේ.

rect භාවිතයෙන් ගැටලුවක් අඳිමු:

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

Результат:

clearRect ක්‍රමය

ඊළඟ ක්‍රමය වන clearRect(x, y, පළල, උස) මකන ලදක් ලෙස ක්‍රියා කර, අතිරේකාකාර කලාපයක් පිරිසිදු කර අන්තර්ගතය සම්පූර්ණයෙන් පාරදෘෂ්‍ය කරයි.

අපි fillRect භාවිතයෙන් කුඩා චතුරස්රයක් අඳිමු සහ clearRect භාවිතයෙන් එහි කොටසක් මකමු:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);

Результат: