জাভাস্ক্রিপ্টে ক্যানভাসের মাধ্যমে লাইন আঁকা

চলুন সহজ থেকে শুরু করি - লাইন আঁকা দিয়ে। কিভাবে এটি করা হয় তা বুঝতে, মনে করুন যে আপনার কাছে একটি কাগজ এবং একটি পেন্সিল আছে। আপনি এই কাগজে আঁকতে পারেন, অথবা না এঁকে শুধু পেন্সিলটিকে প্রয়োজনীয় বিন্দুতে সরিয়ে নিতে পারেন।

জাভাস্ক্রিপ্টও একইভাবে কাজ করে: এর একটি পেন্সিল (বা আঁকার কলম) আছে, প্রয়োজনীয় স্থানে আপনি 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();

Результат:

ব্যবহারিক সমস্যাগুলো