diff options
Diffstat (limited to 'files/bn/web/html/canvas')
| -rw-r--r-- | files/bn/web/html/canvas/index.html | 73 | ||||
| -rw-r--r-- | files/bn/web/html/canvas/tutorial/index.html | 42 |
2 files changed, 115 insertions, 0 deletions
diff --git a/files/bn/web/html/canvas/index.html b/files/bn/web/html/canvas/index.html new file mode 100644 index 0000000000..b64f663d74 --- /dev/null +++ b/files/bn/web/html/canvas/index.html @@ -0,0 +1,73 @@ +--- +title: ক্যানভাস +slug: Web/HTML/Canvas +translation_of: Web/API/Canvas_API +--- +<p> <a href="/bn-BD/docs/HTML/HTML5" title="/bn-BD/docs/HTML/HTML5">HTML5</a> এ যুক্ত <strong>HTML {{HTMLElement("canvas")}} এলিমেন্টটি</strong> ব্যবহার করে স্ক্রিপ্টিংয়ের (সাধারণত <a href="/bn-BD/docs/JavaScript" title="JavaScript">জাভাস্ক্রিপ্ট</a>) সাহায্যে গ্রাফিক্স আঁকা যায়। উদাহরণস্বরুপ, এটি গ্রাফিক্স আঁকা, ছবির কম্পোজিশন তৈরি করা, অ্যানিমেশন তৈরি করা অথবা এমনি রিয়েল-টাইম ভিডিও রেন্ডারিং অথবা প্রসেসিংয়ের কাজেও ব্যবহার করা যায়।</p> +<p><code><canvas></code> এর জন্য মোজিলা অ্যাপ্লিকেশনসমূহ সাপোর্ট পাওয়া শুরু করেছে গিকো ১.৮ (বা <a href="/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><canvas></code> সাপোর্ট করে; ইন্টারনেট এক্সপ্লোরারের পুরনো সংস্করণের জন্য গুগলের <a class="external" href="http://excanvas.sourceforge.net/">Explorer Canvas</a> প্রজেক্টের একটি স্ক্রিপ্ট যুক্ত করে কার্যকরভাবে <code><canvas></code> এর সাপোর্ট যোগ করা যায়। গুগল ক্রোম এবং অপেরা ৯ <code><canvas></code> ক্যানভাস সাপোর্ট করে।</p> +<p><code><canvas></code> টি দিয়ে <a href="/bn-BD/docs/WebGL" title="WebGL">WebGL</a> এর সাহায্যে হার্ডওয়্যার-এক্সেলারেশনের মাধ্যমে ওয়েব পেজে ত্রিমাত্রিক (3D) গ্রাফিক্স দেখানো সম্ভব।</p> +<div class="row topicpage-table"> + <div class="section"> + <h2 class="Documentation" id="Documentation" name="Documentation">ডকুমেন্টেশন</h2> + <dl> + <dt> + <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element">স্পেসিফিকেশন</a></dt> + <dd> + <code><canvas></code> এলিমেট হল WhatWG ওয়েব অ্যাপ্লিকেশনস ১.০ স্পেসিফিকেশন বা HTML5 এর অংশ।</dd> + <dt> + <a href="/bn-BD/docs/HTML/Canvas/Tutorial" title="Canvas_tutorial">ক্যানভাস টিউটোরিয়াল</a></dt> + <dd> + <code><canvas></code> এর সাধারণ ব্যবহার এবং এর অ্যাডভান্সড ফিচারের ওপর একটি বিস্তারিত টিউটোরিয়াল।</dd> + <dt> + <a href="/bn-BD/docs/Code_snippets/Canvas" title="Code_snippets/Canvas">কোড স্নিপেট: ক্যানভাস</a></dt> + <dd> + <code><canvas></code> সংক্রান্ত এক্সটেনশন ডেভেলপার সংশ্লিষ্ট কোড স্নিপেট।</dd> + <dt> + <a href="/en-US/docs/tag/Canvas_examples" title="tag/Canvas_examples">ক্যানভাস উদাহরণ</a></dt> + <dd> + কিছু <code><canvas></code> ডেমো।</dd> + <dt> + <a href="/bn-BD/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas" title="HTML/Canvas/Drawing DOM objects into a canvas">ক্যানভাসে DOM অবজেক্ট আঁকা</a></dt> + <dd> + যেভাবে HTML এলিমেন্টের ন্যায় DOM কন্টেন্ট একটি ক্যানভাসে আঁকবেন।</dd> + <dt> + <a href="/bn-BD/docs/A_Basic_RayCaster" title="A Basic RayCaster">একটি সাধারণ raycaster</a></dt> + <dd> + ক্যানভাসের সাহায্যে ray-tracing এনিমেশনের ডেমো।</dd> + <dt> + <a href="/bn-BD/docs/Gecko_DOM_Reference#Canvas_interfaces" title="Gecko_DOM_Reference#Canvas_interfaces">ক্যানভাস DOM ইন্টারফেস</a></dt> + <dd> + গিকোতে ক্যানভাস DOM ইন্টারফেস সমূহ।</dd> + </dl> + <p><span class="alllinks"><a href="/bn-BD/docs/tag/HTML:Canvas" title="tag/HTML:Canvas">সব দেখুন...</a></span></p> + </div> + <div class="section"> + <h2 class="Community" id="কমিউনিটি">কমিউনিটি</h2> + <ul> + <li>মোজিলা ফোরাম দেখুন... {{DiscussionList("dev-tech-html","mozilla.dev.tech.html")}}</li> + <li><a class="external" href="http://groups.yahoo.com/group/canvas-developers/">ক্যানভাস-ডেভেলপার ইয়াহু গ্রুপ</a></li> + </ul> + <h2 class="Resources" id="Resources" name="Resources">তথ্যভান্ডার</h2> + <ul> + <li><a class="external" href="http://joshondesign.com/p/books/canvasdeepdive/title.html" title="http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html">HTML5 Canvas Deep Dive</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</a> (<a href="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.png" title="HTML5_Canvas_Cheat_Sheet.png (1388×1027)">PNG</a> / <a href="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf" title="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf">PDF</a>)</li> + </ul> + <h2 class="Libraries" id="Libraries" name="Libraries">লাইব্রেরি</h2> + <ul> + <li><a class="external" href="http://libcanvas.github.com/" title="http://libcanvas.github.com/">libCanvas</a> একটি হালকা ও শক্তিশালী ক্যানভাস ফ্রেমওয়ার্ক</li> + <li><a class="external" href="http://processingjs.org" title="http://processingjs.org/">Processing.js</a> হল প্রসেসিং ভিজ্যুয়ালাইজেশন ল্যাঙ্গুয়েজের পোর্ট</li> + <li><a class="external" href="http://easeljs.com/" title="http://easeljs.com/">EaselJS</a> হল একটি ফ্ল্যাশের মত API সমৃদ্ধ লাইব্রেরি</li> + <li><a class="external" href="http://www.liquidx.net/plotkit/" title="http://www.liquidx.net/plotkit/">PlotKit</a> হল একটি চার্ট ও গ্রাফ তৈরির লাইব্রেরি</li> + <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi" title="https://github.com/jeremyckahn/rekapi">Rekapi</a> হল ক্যানভাসের জন্য অ্যানিমেশনের কি-ফ্রেম করার API।</li> + <li><a class="external" href="http://senchalabs.github.com/philogl/" title="http://senchalabs.github.com/philogl/">PhiloGL</a> হল ডাটা ভিজ্যুয়ালাইজেশন, সৃজনশীল কোডিং ও গেম ডেভেলপমেন্টের জন্য একটি WebGL ফ্রেমওয়ার্ক।</li> + <li><a class="external" href="http://thejit.org/" title="http://thejit.org/">JavaScript InfoVis Toolkit</a> ওয়েবের জন্য ইন্টারএ্যাক্টিভ 2D ক্যানভাস ডাটা ভিজ্যুয়ালাইজেশন তৈরি করে।</li> + <li><a href="http://www.frame-engine.com" title="http://www.frame-engine.com">Frame-Engine</a> হল অ্যাপ্লিকেশন ও গেম ডেভেলপ করার একটি ফ্রেমওয়ার্ক।</li> + </ul> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">সম্পর্কিত টপিক</h2> + <ul> + <li><a href="/bn-BD/docs/HTML" title="HTML">HTML</a>, <a href="/bn-BD/docs/JavaScript" title="JavaScript">JavaScript</a>, <a href="/bn-BD/docs/CSS" title="CSS">CSS</a>, <a href="/bn-BD/docs/AJAX" title="AJAX">AJAX</a>, <a href="/bn-BD/docs/DOM" title="DOM">DOM</a>, <a href="/bn-BD/docs/SVG" title="SVG">SVG</a>, <a href="/bn-BD/docs/WebGL" title="WebGL">WebGL</a></li> + </ul> + </div> +</div> +<div> + {{HTML5ArticleTOC()}}</div> diff --git a/files/bn/web/html/canvas/tutorial/index.html b/files/bn/web/html/canvas/tutorial/index.html new file mode 100644 index 0000000000..8ac4e04195 --- /dev/null +++ b/files/bn/web/html/canvas/tutorial/index.html @@ -0,0 +1,42 @@ +--- +title: ক্যানভাস টিউটোরিয়াল +slug: Web/HTML/Canvas/Tutorial +translation_of: Web/API/Canvas_API/Tutorial +--- +<p><strong><code><a href="/bn-BD/docs/HTML/Canvas" title="HTML/Canvas"><canvas></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><canvas></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><canvas></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><canvas></code> এলিমেন্ট ব্যবহারের প্রক্রিয়া আলোচনা করা হয়েছে। উদাহরণগুলো থেকে আপনি <code><canvas></code> দিয়ে কি করতে পারেন, তা আন্দাজ করতে পারেন এবং আপনার নিজের ইমপ্লিমেন্টেশন তৈরিতে সাহায্য করতে পারে।</p> +<h2 id="Before_you_start" name="Before_you_start">শুরু করার পূর্বে</h2> +<p><code><canvas></code> ব্যবহার করা খুব কঠিন - তা নয়। কিন্তু, আপনার অবশ্যই <a href="/bn-BD/docs/HTML" title="HTML">HTML</a> এবং <a href="/bn-BD/docs/JavaScript" title="JavaScript">জাভাস্ক্রিপ্ট</a> এর সাধারণ ধারণা থাকতে হবে।</p> +<p><code><canvas></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/">এডোব ইলাস্ট্রেটর -> ক্যানভাস প্লাগ-ইন</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> |