JavaScript-এ ক্যানভাসে রেখার রং পরিবর্তন
আসুন এখন কনট্যুর এবং ফিলের রং পরিবর্তন করতে শিখি।
এটির জন্য নিম্নলিখিত বৈশিষ্ট্য রয়েছে:
strokeStyle বৈশিষ্ট্যটি
কনট্যুরের রং সেট করে, এবং fillStyle বৈশিষ্ট্যটি
- ফিলের রং সেট করে। রং সাধারণ
CSS
ফরম্যাটে সেট করা হয়।
উদাহরণ
আসুন rect ব্যবহার করে একটি কনট্যুর আঁকুন
এবং এটিকে লাল রং করুন:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 100);
ctx.strokeStyle = 'red';
ctx.stroke();
:
উদাহরণ
আসুন rect ব্যবহার করে একটি বর্গ আঁকুন
এবং এটিকে সবুজ রং করুন:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'green';
ctx.fill();
:
মন্তব্য
গুরুত্বপূর্ণ: যখন আপনি strokeStyle
বা fillStyle সেট করেন,
নতুন মান সেই মুহূর্ত থেকে আঁকা সমস্ত আকৃতির জন্য
প্রযোজ্য হবে। প্রতিটি আকৃতির জন্য, যার
আপনার অন্য রং প্রয়োজন, আপনাকে অবশ্যই
fillStyle বা strokeStyle এর মান
পুনরায় লিখতে হবে।
