জাভাস্ক্রিপ্টে ক্যানভাসের মাধ্যমে আয়তক্ষেত্র আঁকা

বর্গক্ষেত্র এবং আয়তক্ষেত্র অগত্যা 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);

Результат: