files/bn/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
44
45
46
47
48

---
title: ক্যানভাস টিউটোরিয়াল
slug: Web/API/Canvas_API/Tutorial
tags:
  - NeedsReview
translation_of: Web/API/Canvas_API/Tutorial
original_slug: Web/Guide/HTML/Canvas_tutorial
---
<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="width: 200px; height: 450px; float: right;"></a></p>
<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><strong><code>&lt;canvas&gt;</code></strong></a> হচ্ছে একটি <a href="/en-US/docs/HTML" title="HTML">HTML</a> element যেটা স্ক্রিপ্টিং (সাধারণত <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a> ) ব্যবহার করে  গ্রাফিক্স আঁকার জন্য ব্যবহার করা হয় । উদাহরণস্বরূপ  গ্রাফ আঁকতে, ছবি কম্পোজিশন অথবা সাধারন ( তবে<a href="/en-US/docs/HTML/Canvas/A_Basic_RayCaster" title="A_Basic_RayCaster"> বেশি সাধারন নয় </a>) অ্যানিমেশন তৈরি করতে এটি ব্যবহার করা হয় । ডানপাশের ছবিতে <code>&lt;canvas&gt;</code> প্রয়োগ করে কিছু উদাহরণ দেওয়া হয়েছে যা আমরা পরে এর টিউটোরিয়াল এ দেখবো।</p>
<p><code>&lt;canvas&gt;</code> সর্বপ্রথম Apple এর Mac OS X ড্যাশবোর্ড এ ব্যবহার করার জন্য প্রকাশিত হয় এবং পরে Safari এবং  Google Chrome এ প্রয়োগ করা হয়. <a href="/en-US/docs/Gecko" title="Gecko">Gecko</a> 1.8- ভিত্তিক browsers, যেমন Firefox 1.5 ও এই element কে সমর্থন করে. এই <code>&lt;canvas&gt;</code> element হচ্ছে  <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> এর একটি অংশ যা HTML5 নামেও পরিচিত।</p>
<p><span class="seoSummary">এই টিউটোরিয়াল কিভাবে <code>&lt;canvas&gt;</code> element ব্যবহার করে প্রাথমিক ভাবে 2D গ্রাফিক্স তৈরি করা যায় তা বর্ণনা করে । আপনি canvas ব্যবহার করে কি করতে পারবেন এই উদাহরণগুলো তার সুস্পষ্ট ধারণা দেয় এবং code কে snippets করে আপনার নিজের কাঙ্ক্ষিত বিষয়কে</span> তৈরি করতে শুরু করে ।</p>
<h2 id="Before_you_start" name="Before_you_start">শুরু করার পূর্বে</h2>
<p><code>&lt;canvas&gt;</code> element ব্যবহার করা কঠিন কিছু নয় তবে আপনার <a href="/en-US/docs/HTML" title="HTML">HTML</a> এবং  <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a> সম্পর্কে প্রাথমিক ধারণা থাকতে হবে । কিছু পুরাতন browsers এ  <code>&lt;canvas&gt;</code> element সমর্থন করে না, কিন্তু সম্প্রতি সকল প্রধান browsers গুলো তে সমর্থন করে ।  canvas এর default সাইজ হচ্ছে 300px * 150px (width * height). কিন্তু custom size গুলো CSS এর height এবং width property ব্যবহার করে উল্লেখ করা যায় । canvas এ গ্রাফিক্স আঁকতে গেলে আমরা javascript context object ব্যবহার করি , যা গ্রাফিক্সটিকে অনেক উন্নতমানের করে তুলে ।</p>
<h2 id="In_this_tutorial" name="In_this_tutorial">এই টিউটোরিয়াল এ যা আছে</h2>
<ul>
 <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">প্রাথমিক ব্যবহার</a></li>
 <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">আকৃতি</a></li>
 <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images" title="Canvas_tutorial/Using_images">ছবি ব্যবহার করা</a></li>
 <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">styles এবং color প্রয়োগ করা</a></li>
 <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations" title="Canvas_tutorial/Transformations">রূপান্তরকরণ</a></li>
 <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing" title="Canvas_tutorial/Compositing">একত্রীকরণ</a></li>
 <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">প্রাথমিক অ্যানিম্যাশন</a></li>
 <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">canvas সাজানো</a></li>
</ul>
<h2 id="See_also" name="See_also">আরও দেখুন</h2>
<ul>
 <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas ভিত্তিক পৃষ্ঠা</a></li>
 <li><a href="/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas" title="Drawing_Graphics_with_Canvas">Canvas এর সাথে গ্রাফিক্স আঁকা</a></li>
 <li><a href="/en-US/docs/tag/Canvas_examples" title="tag/Canvas_examples">Canvas এর উদাহরণসমূহ</a></li>
 <li><a class="external" href="http://html5tutorial.com" title="http://html5tutorial.com">HTML5 টিউটোরিয়াল</a></li>
 <li><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">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">Canvas এ টেক্সট যোগ করা</a></li>
 <li><a class="external" href="http://www.canvasdemos.com/" title="Canvas Demos">Canvas নমুনাসমূহ- গেইমস, অ্যাপ্লিকেশনস, টুলস এবং টিউটোরিয়ালস</a></li>
 <li><a class="external" href="http://canvimation.github.com/" title="http://canvimation.github.com/">Canvas আঁকা এবং অ্যানিম্যাশন অ্যাপ্লিকেশন</a></li>
 <li><a class="external" href="http://billmill.org/static/canvastutorial/" title="http://billmill.org/static/canvastutorial/">ইন্টার‌্যাক্টিভ canvas টিউটোরিয়াল</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">গুণ এবং পদ্ধতিসহ Canvas Cheat শিট</a></li>
 <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">অ্যাডোব ইলাস্ট্রেটর এর জন্য Canvas plug-in</a></li>
 <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5 Canvas টিউটোরিয়াল</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">Canvas API ব্যবহার করে কিভাবে N grade Bézier curves আঁকা যায়</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/">canvas টিউটোরিয়াল এর ৩১ দিন</a></li>
 <li><a href="http://www.w3.org/TR/2dcontext/" title="http://www.w3.org/TR/2dcontext/">W3C স্ট্যান্ডার্ড</a></li>
 <li><a href="http://www.tutorialspark.com/html5/HTML5_canvas_Intro.php" title="http://www.tutorialspark.com/html5/HTML5_canvas_Intro.php">HTML5 Canvas টিউটোরিয়াল এবং সহায়িকা</a></li>
</ul>
<h2 id="A_note_to_contributors">A note to contributors</h2>
<p>Due to an unfortunate technical error that occurred the week of June 17, 2013, we lost the history of this tutorial, including attributions to all past contributors to its content. We apologize for this, and hope you'll forgive this unfortunate mishap.</p>
<div>
 {{ Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage") }}</div>