Canvas শ্যাডো প্রপার্টি: সম্পূর্ণ রেফারেন্স
HTML5 Canvas চারটি গ্লোবাল প্রপার্টি দিয়ে শ্যাডো নিয়ন্ত্রণ করে। এই প্রপার্টিগুলো সমস্ত ড্রইং অপারেশনে (পাথ, আকৃতি, টেক্সট, ইমেজ) প্রয়োগ হয়।
| ক্রমিক নং | প্রপার্টি ও বর্ণনা |
|---|---|
| ১ | shadowColor [ = value ] বর্তমান শ্যাডো রঙ রিটার্ন করে এবং শ্যাডো রঙ পরিবর্তনের জন্য সেট করা যায়। CSS রঙ ফরম্যাট (hex, rgb, rgba, hsl, named color) গ্রহণ করে। ডিফল্ট: rgba(0,0,0,0) (ট্রান্সপারেন্ট)। |
| ২ | shadowOffsetX [ = value ] বর্তমান শ্যাডো X-অফসেট রিটার্ন করে এবং পরিবর্তনের জন্য সেট করা যায়। ধনাত্মক মান শ্যাডোকে ডানে সরায়, ঋণাত্মক মান বামে। একক: পিক্সেল। ডিফল্ট: 0। |
| ৩ | shadowOffsetY [ = value ] বর্তমান শ্যাডো Y-অফসেট রিটার্ন করে এবং পরিবর্তনের জন্য সেট করা যায়। ধনাত্মক মান শ্যাডোকে নিচে সরায়, ঋণাত্মক মান উপরে। একক: পিক্সেল। ডিফল্ট: 0। |
| ৪ | shadowBlur [ = value ] বর্তমান শ্যাডো ব্লার লেভেল রিটার্ন করে এবং পরিবর্তনের জন্য সেট করা যায়। 0 মানে কঠোর প্রান্তিক শ্যাডো, বেশি মান মানে মृদু/ব্লার শ্যাডো। একক: পিক্সেল (গাউসিয়ান ব্লার রেডিয়াস)। ডিফল্ট: 0। |
ব্যবহারের উদাহরণ
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// শ্যাডো কনফিগারেশন
ctx.shadowColor = 'rgba(0, 0, 0, 0.4)';
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 4;
ctx.shadowBlur = 6;
// টেক্সটে শ্যাডো
ctx.font = 'bold 24px Arial';
ctx.fillStyle = '#3498db';
ctx.fillText('Shadow Text', 50, 50);
// আয়তে শ্যাডো
ctx.fillStyle = '#e74c3c';
ctx.fillRect(50, 70, 200, 80);
// বৃত্তে শ্যাডো
ctx.beginPath();
ctx.arc(300, 150, 40, 0, Math.PI * 2);
ctx.fillStyle = '#2ecc71';
ctx.fill();
// শ্যাডো রিসেট (বादের ড্রইং-এ শ্যাডো না থাকে)
ctx.shadowColor = 'transparent';
// বা
// ctx.shadowOffsetX = 0;
// ctx.shadowOffsetY = 0;
// ctx.shadowBlur = 0;
সর্বোত্তম অনুশীলন
- পারফরম্যান্স: বেশি
shadowBlurমান (10+) বড় ক্যানভাসে স্লো করতে পারে। - লেআউট: শ্যাডোর জন্য পর্যাপ্ত মাজিন রাখুন (ক্লিপিং এড়াতে)।
- স্টেট ম্যানেজমেন্ট: শ্যাডো সেটিংস
save()/restore()দিয়ে ম্যানেজ করুন। - এনিমেশন: রিয়েল-টাইম এনিমেশন-এ শ্যাডো কম ব্যবহার করুন।
