HTML canvas-এ strokeStyle প্রপার্টি স্ট্রোকের জন্য কালার, গ্রেডিয়েন্ট বা প্যাটার্ন সেট করতে ব্যবহৃত হয়। <canvas> এলিমেন্ট জাভাস্ক্রিপ্ট ব্যবহার করে ওয়েব পেজে গ্রাফিক্স আঁকার অনুমতি দেয়। প্রতিটি ক্যানভাসের দুটি এলিমেন্ট থাকে যা ক্যানভাসের উচ্চতা এবং প্রস্থ বর্ণনা করে: height এবং width।
সিনট্যাক্স নিচের মত:
context.strokeStyle=color|gradient|pattern;
উপরের মানগুলো شامل:
- color − আঁক기의 স্ট্রোক কালার।
- gradient − লিনিয়ার বা রেডিয়াল গ্রেডিয়েন্ট অবজেক্ট গ্রেডিয়েন্ট স্ট্রোক তৈরি করতে।
- pattern − প্যাটার্ন অবজেক্ট প্যাটার্ন স্ট্রোক তৈরি করতে।
এখন canvas-এ strokeStyle প্রপার্টি ইমপ্লিমেন্ট করার একটি উদাহরণ দেখি:
উদাহরণ
<!DOCTYPE html> <html> <body> <canvas id="newCanvas" width="550" height="400" style="border −2px solid orange;"></canvas> <script> var c = document.getElementById("newCanvas"); var ctx = c.getContext("2d"); var grad = ctx.createLinearGradient(150, 0, 280, 0); grad.addColorStop("0", "orange"); grad.addColorStop("0.5", "blue"); grad.addColorStop("1.0", "green"); ctx.strokeStyle = grad; ctx.lineWidth = 20; ctx.strokeRect(150, 120, 240, 100); </script> </body> </html>
আউটপুট
