HTML ক্যানভাস টেক্সট

ক্যানভাসে টেক্সট আঁকা

ক্যানভাসে টেক্সট আঁকতে, সবচেয়ে মূল্যবান বৈশিষ্ট্য এবং পদ্ধতি হল:

  • font - টেক্সটের ফন্ট বৈশিষ্ট্য নির্দিষ্ট করুন
  • fillText(text,x,y) - ক্যানভাসে "ভরাট" টেক্সট আঁকুন
  • strokeText(text,x,y) - ক্যানভাসে টেক্সট আঁকুন (ভরাট না)

fillText() ব্যবহার করুন

একটি উদাহরণ

ফন্ট কে "30px Arial" হিসাবে সেট করুন এবং ক্যানভাসে ভরাট টেক্সট লিখুন:

আপনার ব্রাউজারটি HTML5 ক্যানভাস ট্যাগটির সমর্থন করে না。

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

আপনার হাতে চাপ দিন

strokeText() ব্যবহার করুন

একটি উদাহরণ

ফন্ট কে "30px Arial" হিসাবে সেট করুন এবং ক্যানভাসে টেক্সট লিখুন (ভরাট না):

আপনার ব্রাউজারটি HTML5 ক্যানভাস ট্যাগটির সমর্থন করে না。

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

আপনার হাতে চাপ দিন

রঙ এবং মধ্যস্থানে টেক্সট যোগ করুন

একটি উদাহরণ

ফন্ট কে "30px Comic Sans MS" হিসাবে সেট করুন এবং ক্যানভাসের মধ্যে লাল রঙের টেক্সট লিখুন:

আপনার ব্রাউজারটি HTML5 ক্যানভাস ট্যাগটির সমর্থন করে না。

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);

আপনার হাতে চাপ দিন

অন্যান্য দেখুন:

CodeW3C.com-এর সমপূর্ণ Canvas রেফারেন্স ম্যানুয়েল