JavaScript භාවිතයෙන් canvas හරහා රේඛා අඳිමු
අපි සරල දෙයකින් පටන් ගනිමු - රේඛා අඳිමු. මෙය කරන්නේ කෙසේදැයි තේරුම් ගැනීමට, ඔබට කඩදාසි පත්‍රයක් සහ පැන්සලක් තිබෙනවා යැයි සිතන්න. ඔබට මෙම කඩදාසියේ ඇඳීමට හෝ ඇඳීම නොකර අවශ්‍ය ස්ථානයට පැන්සල ගෙන යාමට හැකිය.
JavaScript ද එලෙසම ක්‍රියා කරයි: එයට පැන්සලක් (හෝ ඇඳීම සඳහා පෑනක්) තිබේ,
අවශ්‍ය ස්ථානයට ඔබට එය ගෙන යා හැක්කේ
moveTo ක්‍රමය භාවිතයෙනි, සහ ඇඳීම -
lineTo ක්‍රමය භාවිතයෙනි.
ක්‍රම දෙකම පරාමිතීන් ලෙස පෑනේ කෙළවර ගෙන යා යුතු ස්ථානය ගනී - පළමු පරාමිතිය
තිරසර සම්බන්ධීකරණය, දෙවන පරාමිතිය සිරස් සම්බන්ධීකරණය. සම්බන්ධීකරණවල ආරම්භය -
0, 0 ලක්ෂ්‍යය මූලද්‍රව්‍යයේ ඉහළ වම් කෙළවරයි.
පෑන අවශ්‍ය ස්ථානයට ගමන් කරන විට -
moveTo ක්‍රමය සරලව ගෙනයයි, සහ
lineTo ක්‍රමය ගමන් කරන විට අඳින්නේ
පෑනේ වර්තමාන ස්ථානයේ සිට එය ගමන් කරන ලක්ෂ්‍යය දක්වා
රේඛාවකි.
කෙසේ වෙතත්, ඉහත කේතය ක්‍රියාත්මක කළහොත්
- කිසිවක් සිදු නොවනු ඇත: තවත්
අණ දෙකක් ලිවීමට අවශ්‍ය වේ: පළමු අණය beginPath
රේඛාව ඇඳීම ආරම්භ කිරීමට පෙර
දැක්විය යුතුය, සහ දෙවන අණය stroke
සියලුම moveTo සහ lineTo සංයෝජනවලට පසුව
කැඳවිය යුතු එමඟින් රේඛාව අඳිනු ලැබේ.
එසේනම්, රේඛාවක් ඇඳීම සඳහා වැඩ කරන කේතය ලියමු:
අපි රේඛාවක් අඳිමු
html<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 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(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();
Результат:
අපි ත්‍රිකෝණයක් අඳිමු
html<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(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.stroke();
Результат:
අපි කුඩා චතුරස්‍රයක් අඳිමු
html<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.closePath();
ctx.stroke();
Результат:
ආකෘති වසා දැමීම
වසා ඇති ආකෘතියක් ඇඳීම සඳහා සියලුම
රේඛා කිරීම අවශ්‍ය නොවේ -
අවසාන රේඛාව ස්වයංක්‍රීයව
ඇඳී ආකෘතිය වසා දැමිය හැකිය.
මේ සඳහා stroke ක්‍රමයට පෙර
closePath ක්‍රමය කැඳවිය යුතුය.
මෙම ක්‍රමය ආරම්භක ලක්ෂ්‍යයට අවසාන ලක්ෂ්‍යයෙන් සරල රේඛාවක් ඇඳීමෙන් ආකෘතිය වසා දැමීමට උත්සාහ කරයි. ආකෘතිය දැනටමත් වසා ඇත්නම් හෝ සරල ලක්ෂ්‍යයක් නම්, ක්‍රමය කිසිවක් නොකරයි.
අපි closePath භාවිතයෙන් ත්‍රිකෝණයක් අඳිමු:
html<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(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - මෙම පියවර අත්හරින්නෙමු
ctx.closePath();
ctx.stroke();
Результат:
ආකෘති පිරවීම
stroke ක්‍රමය වෙනුවට
fill ක්‍රමය භාවිතා කළ හැකිය - මෙම අවස්ථාවේදී ආකෘතිය අනිවාර්යයෙන්ම
සම්පූර්ණයෙන් වසා නොතිබිය යුතුය - එය පිරවෙනු ඇත
එලෙසම:
html<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(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - මෙම පියවර අත්හරින්නෙමු
//ctx.closePath(); - මෙයද එසේම
ctx.fill();
Результат: