HTML Canvas লাইন

ইনস্ট্যান্স

// ক্যানভাস তৈরি করুন:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// একটি নতুন পথ নির্দিষ্ট করুন:
ctx.beginPath();
// শুরু পয়েন্ট নির্দিষ্ট করুন:
ctx.moveTo(0, 0);
// শেষ পয়েন্ট নির্দিষ্ট করুন:
ctx.lineTo(200, 100);
// চিত্রিত করুন:
ctx.stroke();

স্বয়ংক্রিয়ভাবে প্রয়াস করুন

Canvas লাইন চিত্রিতকরণ

লাইন চিত্রিত করা হয় ক্যানভাসের পথের মাধ্যমে:

পদ্ধতি

beginPath() মথুর মাধ্যমে একটি নতুন পথ শুরু করা হয়। এটা কিছুই চিত্রিত করে না, তা শুধুমাত্র একটি নতুন পথ নির্দিষ্ট করে

moveTo() মথুর মাধ্যমে লাইনের শুরু পয়েন্ট নির্দিষ্ট করা হয়। এটা কিছুই চিত্রিত করে না, তা শুধুমাত্র একটি শুরু পয়েন্ট সেট করে

lineTo() মথুর মাধ্যমে লাইনের শেষ পয়েন্ট নির্দিষ্ট করা হয়। এটা কিছুই চিত্রিত করে না, তা শুধুমাত্র একটি শেষ পয়েন্ট সেট করে

stroke() মথুর মাধ্যমে লাইন অস্তিত্বায়িত করা হয়। ডিফল্ট লাইন রঙ black

lineWidth প্রতিভা

lineWidth প্রতিভা ক্যানভাসে চিত্রিত হতে ব্যবহৃত লাইন প্রশস্ততা নির্দিষ্ট করে

এটা stroke() মথুর পূর্বে সেট করা উচিত。

ইনস্ট্যান্স

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.stroke();

স্বয়ংক্রিয়ভাবে প্রয়াস করুন

strokeStyle প্রতিভা

strokeStyle প্রতিভা ক্যানভাসে চিত্রিত হতে ব্যবহৃত শৈলীকে নির্দিষ্ট করে

এটা stroke() মথুর পূর্বে সেট করা উচিত。

ইনস্ট্যান্স

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();

স্বয়ংক্রিয়ভাবে প্রয়াস করুন

lineCap প্রতিভা

lineCap প্রতিভা লাইনের শেষ শৈলী (butt, round বা square) নির্দিষ্ট করে

ডিফল্ট হিসেবে square (চক্কীর) হয়。

এটা stroke() মথুর পূর্বে সেট করা উচিত。

ইনস্ট্যান্স

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(175,75);
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();

স্বয়ংক্রিয়ভাবে প্রয়াস করুন

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

CodeW3C.com-এর সম্পূর্ণ Canvas পরিচিতি হান্ডবুক