diff options
Diffstat (limited to 'files/fa/web/api/canvas_api')
| -rw-r--r-- | files/fa/web/api/canvas_api/tutorial/index.html | 181 |
1 files changed, 0 insertions, 181 deletions
diff --git a/files/fa/web/api/canvas_api/tutorial/index.html b/files/fa/web/api/canvas_api/tutorial/index.html deleted file mode 100644 index 2e5832e2ac..0000000000 --- a/files/fa/web/api/canvas_api/tutorial/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: رسم گرافیک با Canvas -slug: Web/API/Canvas_API/Tutorial -translation_of: Web/API/Canvas_API/Tutorial -translation_of_original: Web/API/Canvas_API/Drawing_graphics_with_canvas -original_slug: HTML/Canvas/Drawing_Graphics_with_Canvas ---- -<div class="note"> - <p dir="rtl">بخش عمده‌ای از این مطلب (به جز مستندات drawWindow) به صفحه‌ی اصلی <a href="/en/Canvas_tutorial" title="/en/Canvas_tutorial">آموزش Canvas</a> منتقل شده است، بنابراین این صفحه نیز به احتمال زیاد به آن قسمت منتقل می‌شود تا از ایجاد محتوای تکراری جلوگیری شود.</p> -</div> -<h3 dir="rtl" id="Introduction" name="Introduction">مقدمه</h3> -<p dir="rtl">با انتشار <a href="/en/Firefox_1.5_for_developers" title="/en/Firefox_1.5_for_developers">فایرفاکس ۱.۵</a>، عنصر جدیدی از HTML برای برنامه‌نویسی حالت گرافیکی در فایرفاکس به وجود آمد. <code><canvas></code> بر اساس <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas" title="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">مستندات WHATWG برای Canvas</a> پیاده‌سازی شده است که خود این مستندات نیز بر پایه‌ی عنصر <code><canvas></code> در مرورگر سافاری از اپل ایجاد شده است. از آن می‌توان برای ترسیم نمودار، عنصرهای واسط کاربری و سایر عنصرهای گرافیکی در مرورگر استفاده کرد.</p> -<p dir="rtl"><code><canvas></code> با ایجاد یک سطح ترسیمی با اندازه‌ی ثابت سبب می‌شود که یک یا چند <em>فضای گرافیکی</em> به وجود بیایند. در این مقاله ما بر روی فضای گرافیکی ۲ بعدی تمرکز می‌کنیم. برای گرافیک ۳ بعدی، شما باید از <a href="/en/WebGL" title="/en/WebGL">فضای گرافیکی WebGL</a> استفاده کنید.</p> -<h3 dir="rtl" id="The_2D_Rendering_Context" name="The_2D_Rendering_Context">فضای گرافیکی ۲ بعدی</h3> -<h4 dir="rtl" id="یک_نمونه‌ی_ساده">یک نمونه‌ی ساده</h4> -<p dir="rtl">برای شروع، با نمونه‌ای ساده که دو مستطیل با فضای مشترک شفاف مشخص شده‌اند، آغاز می‌کنیم:</p> -<p><img align="right" alt="Example 1." class="internal" src="/@api/deki/files/602/=Canvas_ex1.png"></p> -<pre class="brush: js"><html> - <head> - <script type="application/javascript"> -function draw() { - var canvas = document.getElementById("canvas"); - var ctx = canvas.getContext("2d"); - - ctx.fillStyle = "rgb(200,0,0)"; - ctx.fillRect (10, 10, 55, 50); - - ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; - ctx.fillRect (30, 30, 55, 50); -} - </script> - </head> - <body onload="draw()"> - <canvas id="canvas" width="300" height="300"></canvas> - </body> -</html> -</pre> -<p dir="rtl">تابع <code>draw</code> با دریافت عنصر <code>canvas</code> فضای ۲ بعدی آن را مشخص می‌کند. شی <code>ctx</code> می‌تواند برای رسم گرافیک روی بوم استفاده شود. در این کد، دو مستطیل با تنظیمات <code>fillStyle</code> و <code>fiilRect</code> با فضای مشترک شفاف رسم می‌شوند. <code>fillStyle</code> دوم از <code>rgba</code> برای مشخص کردن شفافیت با رنگ مورد نظر، استفاده می‌کند.</p> -<p dir="rtl"><code>fillRect</code> برای رسم مستطیل، <code>strokeRect</code> برای رسم حاشیه‌های مستطیل و <code>clearRect</code> برای پاک‌کردن مستطیل استفاده می‌شوند. برای ایجاد شکل‌های پیچیده‌تر، از مسیرها استفاده می‌شود.</p> -<h4 dir="rtl" id="Using_Paths" name="Using_Paths">استفاده از مسیرها</h4> -<p dir="rtl">تابع <code>beginPath</code> یک مسیر جدید را آغاز می‌کند و متدهای <code>moveTo</code>, <code>lineTo</code>, <code>arcTo</code>, <code>arc</code> و از این قبیل، بخش‌های مختلفی را به مسیر تعریف‌شده اضافه می‌کنند. مسیر ایجاد شده توسط تابع <code>closePath</code> بسته می‌شود. زمانی که یک مسیر ایجاد شود، شما می‌توانید با <code>fill</code> یا <code>stroke</code> فضای داخل یا حاشیه‌ی مسیر را روی بوم رسم کنید.</p> -<p><img align="right" alt="Example 2." class="internal" src="/@api/deki/files/603/=Canvas_ex2.png"></p> -<pre class="brush: js"><html> - <head> - <script type="application/javascript"> -function draw() { - var canvas = document.getElementById("canvas"); - var ctx = canvas.getContext("2d"); - - ctx.fillStyle = "red"; - - ctx.beginPath(); - ctx.moveTo(30, 30); - ctx.lineTo(150, 150); - // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong. - ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- this is right formula for the image on the right -> - ctx.lineTo(30, 30); - ctx.fill(); -} - </script> - </head> - <body onload="draw()"> - <canvas id="canvas" width="300" height="300"></canvas> - </body> -</html> -</pre> -<p dir="rtl">فراخوانی هر یک از توابع <code>fill</code> یا <code>stroke</code>، روی مسیر فعلی تاثیر می‌گذارد. اگر دوباره قصد رنگ‌آمیزی یا ایجاد حاشیه در مسیر را داشته باشیم باید مجدد آن را تعریف کنیم.</p> -<h4 dir="rtl" id="Graphics_State" name="Graphics_State">حالت گرافیکی</h4> -<p dir="rtl">صفت‌های یک فضای گرافیکی مانند <code>fillStyle</code>, <code>strokeStyle</code>, <code>lineWidth</code> و <code>lineJoin</code> قسمتی از حالت گرافیکی فعلی هستند. فضای گرافیکی شامل دو متد <code>save</code> و <code>restore</code> است که می‌توانند برای انتقال حالت کنونی به مجموعه‌ی حالت‌ها یا از مجموعه‌ی حالت‌ها استفاده شوند.</p> -<h4 dir="rtl" id="A_More_Complicated_Example" name="A_More_Complicated_Example">یک نمونه‌ی پیچیده‌تر</h4> -<p dir="rtl">در ادامه به نمونه‌ای پیچیده‌تر می‌پردازیم که شامل مسیرها، حالت، و همچنین ماتریس انتقال است. متدهای این فضا یعنی <code>translate</code>, <code>scale</code> و <code>rotate</code> برای انتقال ماتریس به کار می‌روند که تمامی نقطه‌های ایجاد شده ابتدا توسط این ماتریس منتقل می‌شوند.</p> -<p><img align="right" alt="Example 3." class="internal" src="/@api/deki/files/604/=Canvas_ex3.png"></p> -<pre class="brush: js"> <html> - <head> - <script type="application/javascript"> - function drawBowtie(ctx, fillStyle) { - - ctx.fillStyle = "rgba(200,200,200,0.3)"; - ctx.fillRect(-30, -30, 60, 60); - - ctx.fillStyle = fillStyle; - ctx.globalAlpha = 1.0; - ctx.beginPath(); - ctx.moveTo(25, 25); - ctx.lineTo(-25, -25); - ctx.lineTo(25, -25); - ctx.lineTo(-25, 25); - ctx.closePath(); - ctx.fill(); - } - - function dot(ctx) { - ctx.save(); - ctx.fillStyle = "black"; - ctx.fillRect(-2, -2, 4, 4); - ctx.restore(); - } - - function draw() { - var canvas = document.getElementById("canvas"); - var ctx = canvas.getContext("2d"); - - // note that all other translates are relative to this - // one - ctx.translate(45, 45); - - ctx.save(); - //ctx.translate(0, 0); // unnecessary - drawBowtie(ctx, "red"); - dot(ctx); - ctx.restore(); - - ctx.save(); - ctx.translate(85, 0); - ctx.rotate(45 * Math.PI / 180); - drawBowtie(ctx, "green"); - dot(ctx); - ctx.restore(); - - ctx.save(); - ctx.translate(0, 85); - ctx.rotate(135 * Math.PI / 180); - drawBowtie(ctx, "blue"); - dot(ctx); - ctx.restore(); - - ctx.save(); - ctx.translate(85, 85); - ctx.rotate(90 * Math.PI / 180); - drawBowtie(ctx, "yellow"); - dot(ctx); - ctx.restore(); - } - </script> - </head> - <body onload="draw()"> - <canvas id="canvas" width="300" height="300"></canvas> - </body> - </html> -</pre> -<p dir="rtl">قطعه کد بالا دو متد <code>drawBowtie</code> و <code>dot</code> را که هر کدام ۴ مرتبه فراخوانی شده‌اند، دربرمی‌گیرد. قبل از هر فراخوانی، از متدهای <code>translate</code> و <code>rotate</code> برای ایجاد ماتریس انتقال استفاده می‌شود که به ترتیب نقطه و پاپیون را مکان‌دهی می‌کنند. <code>dot</code> یک مستطیل کوچک به مرکز (0, 0) و <code>drawBowtie</code> یک پاپیون کوچک را با استفاده از مسیرها و رنگ مورد نظر به وجود می‌آورد.</p> -<p dir="rtl">هر چه عملیات ماتریس انباشته‌تر می‌شوند، متدهای <code>save</code> و <code>restore</code> برای ذخیره‌سازی و بازگرداندن حالت گرافیکی استفاده می‌شوند. چیزی که باید به یاد داشت این است که چرخش همیشه در مسیر فعلی شکل می‌گیرد یعنی ترتیب<code> translate() rotate() translate()</code> به یک شکل و ترتیب <code>translate() translate() rotate()</code> به شکلی دیگر منجر می‌شوند.</p> -<h3 dir="rtl" id="Compatibility_With_Apple_.3Ccanvas.3E" name="Compatibility_With_Apple_.3Ccanvas.3E">سازگاری با عنصر <canvas> اپل</h3> -<p dir="rtl">در اکثر موارد، <code><canvas></code> با نمونه‌ی پیاده‌سازی شده‌ی اپل سازگاری دارد. اگرچه چند مورد هستند که باید به آن‌ها توجه کرد.</p> -<h4 dir="rtl" id="Required_.3C.2Fcanvas.3E_tag" name="Required_.3C.2Fcanvas.3E_tag">برچسب پایانی مورد نیاز است</h4> -<p dir="rtl">در پیاده‌سازی سافاری از اپل، <code><canvas></code> عنصری است که مشابه <code><img></code> پیاده‌سازی شده است، یعنی به برچسب پایانی نیازی ندارد. اگرچه، برای این‌که <code><canvas></code> به صورت گسترده در وب استفاده شود، برخی امکانات برای محتوای بازگشتی بایستی فراهم شوند. از این رو، پیاده‌سازی موزیلا از این عنصر، نیازمند استفاده از برچسب پایانی است.</p> -<p dir="rtl">اگر به محتوای بازگشتی نیازی نباشد، یک نمونه‌ی ساده مانند <code><canvas id="foo" ...></canvas></code> با هر دو پیاده‌سازی سافاری و موزیلا سازگاری دارد، با این تفاوت که سافاری برچسب پایانی را در نظر نمی‌گیرد.</p> -<p dir="rtl">اگر محتوای بازگشتی مورد استفاده قرار گیرد، بایستی از برخی تکنیک‌های CSS برای ایجاد آن در سافاری استفاده کرد و همچنین از برخی تکنیک‌ها برای فهماندن این مطلب به IE!</p> -<h3 dir="rtl" id="Additional_Features" name="Additional_Features">ویژگی‌های دیگر</h3> -<h4 dir="rtl" id="فراهم‌کردن_محتوای_وب_در_داخل_Canvas">فراهم‌کردن محتوای وب در داخل Canvas</h4> -<div class="note" dir="rtl"> - این ویژگی تنها با مجوزهای مرورگر Chrome قابل اعمال است و در صفحه‌های HTML معمولی استفاده نمی‌شود. <a href="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352" title="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352">علت آن را بدانید</a>.</div> -<p dir="rtl">پیاده‌سازی موزیلا از <code>canvas</code> با استفاده از متد <a href="/en/DOM/CanvasRenderingContext2D#drawWindow()" title="/en/DOM/CanvasRenderingContext2D#drawWindow()"><code>drawWindow</code></a> گسترش یافته است. این متد تصویری از یک <code>صفحه‌ی</code> DOM را در داخل canvas رسم می‌کند. برای نمونه:</p> -<p>Mozilla's <code>canvas</code> is extended with the <a href="/en/DOM/CanvasRenderingContext2D#drawWindow()" title="en/DOM/CanvasRenderingContext2D#drawWindow()"><code>drawWindow()</code></a> method. This method draws a snapshot of the contents of a DOM <code>window</code> into the canvas. For example,</p> -<pre class="brush: js">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)"); -</pre> -<p dir="rtl">قطعه‌کد بالا محتوای پنجره‌ی فعلی را در مستطیلی با ابعاد ذکر شده به پیکسل نسبت به گوشه‌ی بالا و چپ پنچره در یک پیش‌زمینه‌ی سفید از بوم، رسم می‌کند. با مشخص کردن "rgba(255,255,255,0)" به عنوان رنگ، محتوا با پیش‌زمینه‌ی شفاف رسم می‌شود.</p> -<p dir="rtl">معمولا استفاده از رنگ پیش‌زمینه‌ای به جز سفید "rgb(255,255,255)" یا شفاف کار درستی نیست چرا که تمامی مرورگرها از این استاندارد برای نمایش صفحات وب استفاده می‌کنند.</p> -<p dir="rtl">با این روش، ممکن است بتوان یک IFRAME پنهان با محتوای دلخواه (برای نمونه متنی که با CSS سبک‌دهی شده باشد یا SVG) را در یک بوم رسم کرد، که به این صورت می‌توان آن را مقیاس‌دهی کرد یا چرخاند یا هر عمل دیگری که با انتقال‌های فعلی می‌توان انجام داد.</p> -<p dir="rtl">Ted Mielczarek با افزونه‌ی <a href="http://ted.mielczarek.org/code/mozilla/tabpreview/" title="http://ted.mielczarek.org/code/mozilla/tabpreview/">tab preview</a> خود در chrome این امکان را فراهم می‌کند تا بتوان تصویرهای کوچک از وب‌سایت‌ها را مشاهده کرد، و کد آن نیز در دسترس است.</p> -<div class="note" dir="rtl"> - <strong>یادداشت</strong>: استفاده از <code>canvas.drawWindow()</code> در داخل رخداد <code>onload</code> سند عمل نمی‌کند. در فایرفاکس ۳.۵ به بعد، می‌توان با استفاده از رخداد <a href="/en/Gecko-Specific_DOM_Events#MozAfterPaint" title="/en/Gecko-Specific_DOM_Events#MozAfterPaint">MozAfterPaint</a> این حالت را در زمان بارگذاری صفحه پیاده‌سازی کرد.</div> -<h3 id="See_also" name="See_also">See also</h3> -<ul> - <li><a href="/en/HTML/Canvas" title="en/HTML/Canvas">Canvas topic page</a></li> - <li><a href="/en/Canvas_tutorial" title="en/Canvas_tutorial">Canvas tutorial</a></li> - <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG specification</a></li> - <li><a class="external" href="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html" title="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html">Apple Canvas Documentation</a></li> - <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Rendering Web Page Thumbnails</a></li> - <li>Some <a href="/Special:Tags" title="Site Tags">examples</a>: - <ul> - <li><a class="external" href="http://azarask.in/projects/algorithm-ink">Algorithm Ink</a></li> - <li><a class="external" href="http://www.tapper-ware.net/canvas3d/">OBJ format 3D Renderer</a></li> - <li><a href="/en/A_Basic_RayCaster" title="en/A_Basic_RayCaster">A Basic RayCaster</a></li> - <li><a class="external" href="http://awordlike.textdriven.com/">The Lightweight Visual Thesaurus</a></li> - <li><a class="external" href="http://caimansys.com/painter/">Canvas Painter</a></li> - </ul> - </li> - <li><a href="/Special:Tags" title="Site Tags">And more...</a></li> -</ul> -<p>{{ languages( { "fr": "fr/Dessiner_avec_canvas", "ja": "ja/Drawing_Graphics_with_Canvas", "pl": "pl/Rysowanie_grafik_za_pomoc\u0105_Canvas", "ko": "ko/Drawing_Graphics_with_Canvas" } ) }}</p> |