HTML5 Canvas-এ শ্যাডো আঁকার পদ্ধতি

Canvas-এ শ্যাডো (Shadow) ইফেক্ট যোগ করা

HTML5 Canvas-এ আঁকা যেকোনো আকৃতি (আয়ত, বৃত্ত, পাথ, টেক্সট ইত্যাদি) এর নিচে শ্যাডো যোগ করা সম্ভব। এর জন্য চারটি গ্লোবাল প্রপার্টি ব্যবহার করা হয়: shadowColor, shadowOffsetX, shadowOffsetY, এবং shadowBlur।

সম্পূর্ণ কোড উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <style>
    #test { width: 400px; height: 200px; margin: 20px auto; border: 1px solid #ccc; }
  </style>
  <script>
    function drawShape() {
      const canvas = document.getElementById('mycanvas');
      if (canvas.getContext) {
        const ctx = canvas.getContext('2d');
        
        // শ্যাডো প্রপার্টি সেট করুন
        ctx.shadowOffsetX = 5;   // X-অক্ষের অফসেট
        ctx.shadowOffsetY = 5;   // Y-অক্ষের অফসেট
        ctx.shadowBlur = 8;      // ব্লার রেডিয়াস
        ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; // শ্যাডোর রঙ (সেমিট্রান্সপারেন্ট কালো)
        
        // টেক্সট আঁকুন
        ctx.font = "28px 'Segoe UI', sans-serif";
        ctx.fillStyle = "#2c3e50";
        ctx.fillText("এটি একটি শ্যাডো টেস্ট", 50, 80);
        
        // আয়ত আঁকুন শ্যাডো সহ
        ctx.fillStyle = "#e74c3c";
        ctx.fillRect(50, 100, 200, 60);
        
      } else {
        alert('Canvas সাপোর্ট করে না। আধুনিক ব্রাউজার ব্যবহার করুন।');
      }
    }
  </script>
</head>
<body id="test" onload="drawShape();">
  <canvas id="mycanvas" width="400" height="200"></canvas>
</body>
</html>

শ্যাডো প্রপার্টিগুলোর বিস্তারিত

গুরুত্বপূর্ণ টিপস

• শ্যাডো সব ড্রইং অপারেশনে প্রয়োগ হয় (পাথ, ইমেজ, টেক্সট সব)।
• shadowColor টি যদি ট্রান্সপারেন্ট হয় (ডিফল্ট), শ্যাডো দেখাবে না।
• পারফরম্যান্সের জন্য বড় ক্যানভাসে অতিরিক্ত ব্লার এড়িয়ে চলুন।
• শ্যাডো অক্ষম করতে: ctx.shadowColor = 'rgba(0,0,0,0)';