ক্যানভাস টিউটোরিয়াল

  • Revision slug: Web/Guide/HTML/Canvas_tutorial
  • Revision title: ক্যানভাস টিউটোরিয়াল
  • Revision id: 510893
  • তৈরি হয়েছেঃ
  • তৈরিকারীঃ mahmudtamim
  • Is current revision? না
  • মন্তব্য

Revision Content

<canvas> হচ্ছে একটি HTML element যেটা স্ক্রিপ্টিং (সাধারণত JavaScript ) ব্যবহার করে  গ্রাফিক্স আঁকার জন্য ব্যবহার করা হয় । উদাহরণস্বরূপ  গ্রাফ আঁকতে, ছবি কম্পোজিশন অথবা সাধারন ( তবে বেশি সাধারন নয় ) অ্যানিমেশন তৈরি করতে এটি ব্যবহার করা হয় । ডানপাশের ছবিতে <canvas> প্রয়োগ করে কিছু উদাহরণ দেওয়া হয়েছে যা আমরা পরে এর টিউটোরিয়াল এ দেখবো।

<canvas> সর্বপ্রথম Apple এর Mac OS X ড্যাশবোর্ড এ ব্যবহার করার জন্য প্রকাশিত হয় এবং পরে Safari এবং  Google Chrome এ প্রয়োগ করা হয়. Gecko 1.8- ভিত্তিক browsers, যেমন Firefox 1.5 ও এই element কে সমর্থন করে. এই <canvas> element হচ্ছে  WhatWG Web applications 1.0 এর একটি অংশ যা HTML5 নামেও পরিচিত।

এই টিউটোরিয়াল কিভাবে <canvas> element ব্যবহার করে প্রাথমিক ভাবে 2D গ্রাফিক্স তৈরি করা যায় তা বর্ণনা করে । আপনি canvas ব্যবহার করে কি করতে পারবেন এই উদাহরণগুলো তার সুস্পষ্ট ধারণা দেয় এবং code কে snippets করে আপনার নিজের কাঙ্ক্ষিত বিষয়কে তৈরি করতে শুরু করে ।

শুরু করার পূর্বে

<canvas> element ব্যবহার করা কঠিন কিছু নয় তবে আপনার HTML এবং  JavaScript সম্পর্কে প্রাথমিক ধারণা থাকতে হবে । কিছু পুরাতন browsers এ  <canvas> element সমর্থন করে না, কিন্তু সম্প্রতি সকল প্রধান browsers গুলো তে সমর্থন করে ।  canvas এর default সাইজ হচ্ছে 300px * 150px (width * height). কিন্তু custom size গুলো CSS এর height এবং width property ব্যবহার করে উল্লেখ করা যায় । canvas এ গ্রাফিক্স আঁকতে গেলে আমরা javascript context object ব্যবহার করি , যা গ্রাফিক্সটিকে অনেক উন্নতমানের করে তুলে ।

In this tutorial

See also

A note to contributors

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.

{{ Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage") }}

Revision Source

<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> ) ব্যবহার করে&nbsp; গ্রাফিক্স আঁকার জন্য ব্যবহার করা হয় । উদাহরণস্বরূপ&nbsp; গ্রাফ আঁকতে, ছবি কম্পোজিশন অথবা সাধারন ( তবে<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 এবং&nbsp; 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 হচ্ছে&nbsp; <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> এবং&nbsp; <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a> সম্পর্কে প্রাথমিক ধারণা থাকতে হবে । কিছু পুরাতন browsers এ&nbsp; <code>&lt;canvas&gt;</code> element সমর্থন করে না, কিন্তু সম্প্রতি সকল প্রধান browsers গুলো তে সমর্থন করে ।&nbsp; 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">In this tutorial</h2>
<ul>
 <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">Basic usage</a></li>
 <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">Drawing shapes</a></li>
 <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images" title="Canvas_tutorial/Using_images">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">Applying styles and colors</a></li>
 <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations" title="Canvas_tutorial/Transformations">Transformations</a></li>
 <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing" title="Canvas_tutorial/Compositing">Compositing</a></li>
 <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">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">Optimizing the canvas</a></li>
</ul>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
 <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</a></li>
 <li><a href="/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas" title="Drawing_Graphics_with_Canvas">Drawing Graphics with Canvas</a></li>
 <li><a href="/en-US/docs/tag/Canvas_examples" title="tag/Canvas_examples">Canvas examples</a></li>
 <li><a class="external" href="http://html5tutorial.com" title="http://html5tutorial.com">HTML5 Tutorial</a></li>
 <li><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">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">Adding Text to Canvas</a></li>
 <li><a class="external" href="http://www.canvasdemos.com/" title="Canvas Demos">Canvas Demos - Games, applications, tools and tutorials</a></li>
 <li><a class="external" href="http://canvimation.github.com/" title="http://canvimation.github.com/">Canvas Drawing and Animation Application</a></li>
 <li><a class="external" href="http://billmill.org/static/canvastutorial/" title="http://billmill.org/static/canvastutorial/">Interactive canvas tutorial</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 Sheet with all attributes and methods</a></li>
 <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator to Canvas plug-in</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-n-grade-bezier-curve-with-canvas-api" title="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api">How to draw N grade Bézier curves with the Canvas API</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/">31 days of canvas tutorials</a></li>
 <li><a href="http://www.w3.org/TR/2dcontext/" title="http://www.w3.org/TR/2dcontext/">W3C Standard</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 tutorials and reference</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>
আগের রিভিসনে ফিরে যান