HTML <canvas> ট্যাগ

  • পূর্ববর্তী পৃষ্ঠা <button>
  • পরবর্তী পৃষ্ঠা <caption>

সংজ্ঞা ও ব্যবহার

<canvas> ট্যাগ সাধারণত স্ক্রিপ্ট (সাধারণত JavaScript) দ্বারা রিয়েলটাইম গ্রাফিক ড্রাইভ করা হয়。

<canvas> ট্যাগ স্পষ্ট, তা কেবলমাত্র গ্রাফিকের কনটেনার, গ্রাফিক এক্তুয়ালভাবে ড্রাইভ করতে স্ক্রিপ্ট ব্যবহার করতে হয়。

জাস্ক্রিপ্টকে নিষ্ক্রিয় করা এবং সমর্থন না করা ব্রাউজারে <canvas> এই ব্রাউজারে <canvas> ইলেমেন্টের অভ্যন্তরীণ কোনো টেক্সট

সুঝাওয়া

শিখুন আমাদের HTML ক্যানভাস টিউটোরিয়ালে <canvas> ইলেমেন্টের বিস্তারিত জ্ঞান

সকল অ্যাট্রিবিউট এবং পদ্ধতির পূর্ণ পরীক্ষা করতে, আমাদের HTML Canvas রেফারেন্স ম্যানুয়েল。

ইনস্ট্যান্স

উদাহরণ ১

একটি লাল চতুর্ভুজ সময়বদ্ধভাবে চিত্রিত করুন এবং ক্যানভাস ইলেমেন্টে দেখান

<canvas id="myCanvas">
আপনার ব্রাউজারটি ক্যানভাস ট্যাগটি সমর্থন করে না。
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

আপনার নিজের হাতে নাওয়া করুন

উদাহরণ ২

একটি অন্য ক্যানভাস উদাহরণ:

<canvas id="myCanvas">
আপনার ব্রাউজারটি ক্যানভাস ট্যাগটি সমর্থন করে না。
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// স্পষ্টতা চালু করা
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

আপনার নিজের হাতে নাওয়া করুন

অ্যাট্রিবিউট

অ্যাট্রিবিউট মান বর্ণনা
height পিক্সেল মান ক্যানভাসের উচ্চতা নির্ধারণ করে। ডিফল্ট মান ১৫০।
width পিক্সেল মান ক্যানভাসের প্রশস্ততা নির্ধারণ করে। ডিফল্ট মান ৩০০।

গ্লোবাল অ্যাট্রিবিউট

<canvas> ট্যাগটি ইভেন্ট অ্যাট্রিবিউটকেও সমর্থন করে এইচটিএমএল-এর গ্লোবাল অ্যাট্রিবিউট。

ইভেন্ট অ্যাট্রিবিউট

<canvas> ট্যাগটি ইভেন্ট অ্যাট্রিবিউটকেও সমর্থন করে এইচটিএমএল-এর ইভেন্ট অ্যাট্রিবিউট。

ডিফল্ট সিএসএস সেটিং

অধিকাংশ ব্রাউজার নিম্নলিখিত ডিফল্ট মান দেখাবে <canvas> ইলেমেন্ট:

canvas {
  height: 150px;
  width: 300px;
}

আপনার নিজের হাতে নাওয়া করুন

ক্যানভাসের ইতিহাস

এই এইচটিএমএল ইলেমেন্টটি ক্লায়েন্ট ভেক্টর গ্রাফিক্স এর জন্য ডিজাইন করা হয়েছে। এটি নিজেই কোনো আচরণ নেই, কিন্তু ক্লায়েন্ট জেভাস্ক্রিপ্টকে একটি ড্রেইটিং এপিআই প্রদর্শন করে, যাতে স্ক্রিপ্ট অনুসারে চিত্রিত করতে হবে একটি চিত্রকরণকে কাঠামো করতে পারে।

<canvas> ট্যাগটি Apple দ্বারা Safari 1.3 ওয়েব ব্রাউজারে চালু করা হয়েছে। HTML-এর এই মৌলিক সম্প্রসারণের কারণটি হল, Safari-তে HTML-এর ড্রেইবিং ক্ষমতা Mac OS X ডেস্কটপের Dashboard কম্পোনেন্টের সাথেও ব্যবহৃত হয়, এবং Apple ড্যাশবোর্ডে স্ক্রিপ্টিং গ্রাফিককে সমর্থন করার একটি উপায় চাইতে পারে

Firefox 1.5 এবং Opera 9 সাফারির নেতৃত্ব অনুসরণ করেছে। এই দুইটি ব্রাউজারই <canvas> ট্যাগটি সমর্থন করে

আমরা আমাদের একসঙ্গেই IE-তে <canvas> ট্যাগটি ব্যবহার করতে পারি, এবং IE-র VML সমর্থনের ওপর ওপেন সোর্স জাভাস্ক্রিপ্ট কোড (গুগল দ্বারা শুরু করা) ব্যবহার করে কম্প্যাটিবল কার্টুন গঠন করতে পারি দেখুন:http://excanvas.sourceforge.net/。

<canvas> কে প্রমাণিত করার চেষ্টা একটি অনুষ্ঠানীয় সমিতির দ্বারা এগিয়ে নিয়ে যাওয়া হয়, যেখানে এখন <canvas> HTML 5 ড্রাফটের একটি আধিকারিক ট্যাগ হয়েছে দেখুন:http://www.whatwg.org/specs/web-apps/current-work/

<canvas> ট্যাগ, SVG এবং VML-এর মধ্যে পার্থক্য

<canvas> ট্যাগ, SVG এবং VML-এর মধ্যে একটি গুরুত্বপূর্ণ পার্থক্য হল, <canvas> একটি জাভাস্ক্রিপ্ট ভিত্তিক ড্রেইবিং API ব্যবহার করে, যখন SVG এবং VML একটি XML ডকুমেন্ট ব্যবহার করে ড্রেইবিং করে

এই দুইটি পদ্ধতি কার্যকরীতে সমান, যেকোনও একটি অন্যটিকে নিয়েও প্রতিনিধিত্ব করা যেতে পারে। দেখে দিয়ে তারা অত্যন্ত ভিন্ন, কিন্তু প্রত্যেকটিতেই তার দুর্বলতা ও শক্তি রয়েছে। যেমন, SVG ড্রেইবিং সহজভাবে সম্পাদন করা যেতে পারে, যদি এটির বর্ণনায় উপাদানকে অপসারণ করা হয়।

একই গ্রাফিকের একটি <canvas> ট্যাগ থেকে উপাদানকে অপসারণ করতে, সাধারণত ড্রেইবিংকে হটানো এবং পুনরায় ড্রেইবিং করতে হয়。

কিভাবে <canvas> ট্যাগটি ব্যবহার করা যায়

অধিকাংশ Canvas ড্রেইবিং API <canvas> ইলেক্ট্রনিক উপাদানের ওপর নির্ধারিত নেই, বরং কার্টুনের মাধ্যমে getContext() পদ্ধতিএকটি 'ড্রেইবিং এনভাইরনমেন্ট' অবজেক্ট পাওয়া হয়。

Canvas API টি প্যাথের প্রকাশকৃতা ব্যবহার করে। কিন্তু, প্যাথটি একসর্বমুখী পদ্ধতির মাধ্যমে নির্ধারিত হয়, না তখনও অক্ষর ও সংখ্যার তৈরি শব্দসৃষ্টির রূপে, যেমন beginPath() ও arc() পদ্ধতির আবেদন করা।

পথ নির্দিষ্ট হওয়ার পর, fill() মতো অন্যান্য পদ্ধতিগুলি, এই পথের উপর অপারেশন করে।ড্রেইনিং এনভায়রনমেন্টের বিভিন্ন এটিউটি, যেমন fillStyle, এই অপারেশনগুলি কিভাবে ব্যবহার করা হয়েছে তা বুঝায়।

মন্তব্য:Canvas API-এর একটি অত্যন্ত কমই কারণ তা লেখা টেক্সটকে কোনো সমর্থন না দেয়।একটি <canvas> গ্রাফিকে টেক্সট যোগ করতে, বা একটি বিটম্যাপ ইমেজের সাহায্যে এটা দ্রব্যবহার করা যেতে পারে, বা <canvas> উপরের CSS সাথে লোকেশন ব্যবহার করে HTML টেক্সটকে ওভারলে করা যেতে পারে。

ব্রাউজার সমর্থন

এই টেবিলে সংখ্যা প্রথমবার এই ইলেকট্রনটি সম্পূর্ণভাবে সমর্থনকারী ব্রাউজারের সংস্করণটি উল্লেখ করা হয়েছে。

চ্রোম এজ ফায়ারফক্স সাফারি অপেরা
চ্রোম এজ ফায়ারফক্স সাফারি অপেরা
4.0 9.0 2.0 3.1 9.0
  • পূর্ববর্তী পৃষ্ঠা <button>
  • পরবর্তী পৃষ্ঠা <caption>