files/bn/conflicting/web/api/canvas_api/tutorial/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

---
title: ক্যানভাস টিউটোরিয়াল
slug: Web/HTML/Canvas/Tutorial
translation_of: Web/API/Canvas_API/Tutorial
translation_of_original: Canvas-tutorial-broken
---
<p><strong><code><a href="/bn-BD/docs/HTML/Canvas" title="HTML/Canvas">&lt;canvas&gt;</a></code></strong> হল একটি <a href="/bn-BD/docs/HTML" title="HTML">HTML</a> এলিমেন্ট, যা দ্বারা স্ক্রিপ্টিংয়ের (সাধারণত <a href="/bn-BD/docs/JavaScript" title="JavaScript">জাভাস্ক্রিপ্ট</a>) সাহায্যে গ্রাফিক্স আঁকা যায়। এটি অবশ্য গ্রাফিক্স আঁকা, ছবি কম্পোজিশন তৈরি করা এবং সাধারণ (এবং <a href="/bn-BD/docs/HTML/Canvas/A_Basic_RayCaster" title="A_Basic_RayCaster">অসাধারণ</a>) এনিমেশন তৈরির কাজ করতে পারে।</p>
<p><code>&lt;canvas&gt;</code> এর জন্য মোজিলা অ্যাপ্লিকেশনসমূহ সাপোর্ট পাওয়া শুরু করেছে গিকো ১.৮ (বা <a class="new" href="https://developer.mozilla.org/bn-BD/docs/Firefox_1.5_for_developers" title="Firefox_1.5_for_developers">ফায়ারফক্স ১.৫</a>) থেকে। মূলত এ্যাপল তাদের <a class="external" href="http://www.apple.com/macosx/features/dashboard/">ড্যাশবোর্ড</a> এবং সাফারির জন্য এলিমেন্টটি প্রকাশ করে। <code>&lt;canvas&gt;</code> এলিমেন্টটি <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> স্পেসিফিকেশনের একটি অংশ, যা HTML5 নামেও পরিচিত।</p>
<p>এই টিউটোরিয়ালে আপনার HTML পেজে <code>&lt;canvas&gt;</code> এলিমেন্ট ব্যবহারের প্রক্রিয়া আলোচনা করা হয়েছে। উদাহরণগুলো থেকে আপনি <code>&lt;canvas&gt;</code> দিয়ে কি করতে পারেন, তা আন্দাজ করতে পারেন এবং আপনার নিজের ইমপ্লিমেন্টেশন তৈরিতে সাহায্য করতে পারে।</p>
<h2 id="Before_you_start" name="Before_you_start">শুরু করার পূর্বে</h2>
<p><code>&lt;canvas&gt;</code> ব্যবহার করা খুব কঠিন - তা নয়। কিন্তু, আপনার অবশ্যই <a href="/bn-BD/docs/HTML" title="HTML">HTML</a> এবং <a href="/bn-BD/docs/JavaScript" title="JavaScript">জাভাস্ক্রিপ্ট</a> এর সাধারণ ধারণা থাকতে হবে।</p>
<p><code>&lt;canvas&gt;</code> টি অনেক পুরনো ব্রাউজার সাপোর্ট করে না কিন্তু, ফায়ারফক্স ১.৫ ও পরবর্তী ভার্সন, অপেরা ৯ ও পরবর্তী, এবং সাফারি, গুগল ক্রোমের নতুন ভার্সন ও ইন্টারনেট এক্সপ্লোরার ৯ হতে কাজ করে।</p>
<h2 id="In_this_tutorial" name="In_this_tutorial">এই টিউটোরিয়ালে আছে</h2>
<ul>
  <li><a href="/bn-BD/docs/HTML/Canvas/Tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">সাধারণ ব্যবহার</a></li>
  <li><a href="/bn-BD/docs/HTML/Canvas/Tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">শেপ (জ্যামিতিক আকৃতি) আঁকা</a></li>
  <li><a href="/bn-BD/docs/HTML/Canvas/Tutorial/Using_images" title="Canvas_tutorial/Using_images">ছবি (ইমেজ) ব্যবহার</a></li>
  <li><a href="/bn-BD/docs/HTML/Canvas/Tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">স্টাইল এবং রং প্রয়োগ করা</a></li>
  <li><a href="/bn-BD/docs/HTML/Canvas/Tutorial/Transformations" title="Canvas_tutorial/Transformations">ট্রান্সফরমেশন (রুপান্তর)</a></li>
  <li><a href="/bn-BD/docs/HTML/Canvas/Tutorial/Compositing" title="Canvas_tutorial/Compositing">কম্পোজিট করা</a></li>
  <li><a href="/bn-BD/docs/HTML/Canvas/Tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">সাধারণ এনিমেশন</a></li>
  <li><a href="/bn-BD/docs/HTML/Canvas/Tutorial/Optimizing_canvas" title="https://developer.mozilla.org/bn-BD/docs/Canvas_tutorial/Optimizing_canvas">ক্যানভাস অপটিমাইজ করা</a></li>
</ul>
<h2 id="See_also" name="See_also">আরও দেখুন</h2>
<ul>
  <li><a href="/bn-BD/docs/HTML/Canvas" title="HTML/Canvas">ক্যানভাস টপিক পেজ</a></li>
  <li><a href="/bn-BD/docs/HTML/Canvas/Drawing_Graphics_with_Canvas" title="Drawing_Graphics_with_Canvas">ক্যানভাসের সাহায্যে গ্রাফিক্স আঁকা</a></li>
  <li><a href="/en-US/docs/tag/Canvas_examples" title="tag/Canvas_examples">ক্যানভাসের উদাহরণ</a></li>
  <li><a class="external" href="http://html5tutorial.com" title="http://html5tutorial.com">HTML5 টিউটোরিয়াল</a></li>
  <li><a href="/bn-BD/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">ক্যানভাস ব্যবহার করে টেক্সট আঁকা</a></li>
  <li><a class="external" href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/AddingText/AddingText.html#//apple_ref/doc/uid/TP40010542-CH6-SW4" title="Adding Text to Canvas">ক্যানভাসে টেক্সট যুক্ত করা</a></li>
  <li><a class="external" href="http://www.canvasdemos.com/" title="Canvas Demos">ক্যানভাস ডেমো - গেম, অ্যাপ্লিকেশন, টুল এবং টিউটোরিয়াল</a></li>
  <li><a class="external" href="http://canvimation.github.com/" title="http://canvimation.github.com/">ক্যানভাস ড্রয়িং এবং অ্যানিমেশন অ্যাপ্লিকেশন</a></li>
  <li><a class="external" href="http://billmill.org/static/canvastutorial/" title="http://billmill.org/static/canvastutorial/">ইন্টারঅ্যাক্টিভ ক্যানভাস টিউটোরিয়াল</a></li>
  <li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">সকল এট্রিবিউট ও মেথড সহ ক্যানভাস চিট শিট</a></li>
  <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">এডোব ইলাস্ট্রেটর -&gt; ক্যানভাস প্লাগ-ইন</a></li>
  <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li>
  <li><a class="external" href="http://html5tutorial.com/how-to-draw-a-point-with-the-canvas-api" title="http://html5tutorial.com/how-to-draw-a-point-with-the-canvas-api">ক্যানভাস API এর সাহায্যে একটি বিন্দু আঁকা</a></li>
  <li><a class="external" href="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api" title="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api">ক্যানভাস API এর সাহায্যে N grade Bézier curve আঁকা</a></li>
  <li><a class="external" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">৩১ দিনের ক্যানভাস টিউটোরিয়াল</a></li>
</ul>
<div>
  {{ Next("Canvas_tutorial/Basic_usage") }}</div>