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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
|
---
title: رسم گرافیک با Canvas
slug: HTML/Canvas/Drawing_Graphics_with_Canvas
translation_of: Web/API/Canvas_API/Tutorial
---
<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>
|
