HTML5 Canvas-এ টেক্সট রেন্ডারিং প্রপার্টি ও মেথড
HTML5 Canvas API টেক্সট আঁকার জন্য বেশ কিছু প্রপার্টি এবং মেথড প্রদান করে। নিচে সেগুলোর বিস্তারিত বিবরণ দেওয়া হলো:
| ক্রমিক নং | প্রপার্টি/মেথড ও বিবরণ |
|---|---|
| ১ | font [ = value ] এই প্রপার্টি বর্তমান ফন্ট সেটিংস রিটার্ন করে এবং ফন্ট পরিবর্তনের জন্য সেট করা যায়। উদাহরণ: ctx.font = "20px Arial"; |
| ২ | textAlign [ = value ] এটি বর্তমান টেক্সট অ্যালাইনমেন্ট সেটিংস রিটার্ন করে এবং অ্যালাইনমেন্ট পরিবর্তনের জন্য সেট করা যায়। সম্ভাব্য মান: start, end, left, right, center। |
| ৩ | textBaseline [ = value ] এটি বর্তমান বেসলাইন অ্যালাইনমেন্ট সেটিংস রিটার্ন করে এবং বেসলাইন পরিবর্তনের জন্য সেট করা যায়। সম্ভাব্য মান: top, hanging, middle, alphabetic, ideographic, bottom। |
| ৪ | fillText(text, x, y [, maxWidth ] ) এই মেথড দেওয়া কোঅর্ডিনেট (x, y) অবস্থানে টেক্সট ফিল করে আঁকে। ঐচ্ছিক maxWidth প্যারামিটার দিয়ে সর্বাধিক প্রস্থ নির্দিষ্ট করা যায়। |
| ৫ | strokeText(text, x, y [, maxWidth ] ) এই মেথড দেওয়া কোঅর্ডিনেট (x, y) অবস্থানে টেক্সটের আউটলাইন (স্ট্রোক) আঁকে। ঐচ্ছিক maxWidth প্যারামিটার দিয়ে সর্বাধিক প্রস্থ নির্দিষ্ট করা যায়। |
ব্যবহারের উদাহরণ
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '24px sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = '#333';
ctx.fillText('Hello Canvas!', canvas.width/2, canvas.height/2);
ctx.strokeStyle = '#0066cc';
ctx.strokeText('Hello Canvas!', canvas.width/2, canvas.height/2);
টিপস: fillText টেক্সটের ভিতর ফিল করে, strokeText শুধু আউটলাইন আঁকে। দুটো একসাথে ব্যবহার করে সুন্দর ইফেক্ট তৈরি করা যায়।
