JavaScript-এ ক্যানভাসে রেখার রং পরিবর্তন

আসুন এখন কনট্যুর এবং ফিলের রং পরিবর্তন করতে শিখি। এটির জন্য নিম্নলিখিত বৈশিষ্ট্য রয়েছে: strokeStyle বৈশিষ্ট্যটি কনট্যুরের রং সেট করে, এবং fillStyle বৈশিষ্ট্যটি - ফিলের রং সেট করে। রং সাধারণ CSS ফরম্যাটে সেট করা হয়।

উদাহরণ

আসুন rect ব্যবহার করে একটি কনট্যুর আঁকুন এবং এটিকে লাল রং করুন:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 100);
ctx.strokeStyle = 'red';
ctx.stroke();

Результат:

উদাহরণ

আসুন rect ব্যবহার করে একটি বর্গ আঁকুন এবং এটিকে সবুজ রং করুন:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'green';
ctx.fill();

Результат:

মন্তব্য

গুরুত্বপূর্ণ: যখন আপনি strokeStyle বা fillStyle সেট করেন, নতুন মান সেই মুহূর্ত থেকে আঁকা সমস্ত আকৃতির জন্য প্রযোজ্য হবে। প্রতিটি আকৃতির জন্য, যার আপনার অন্য রং প্রয়োজন, আপনাকে অবশ্যই fillStyle বা strokeStyle এর মান পুনরায় লিখতে হবে।

ব্যবহারিক কাজ