files/ar/web/api/canvas_api/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
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

---
title: الواجهة البرمجية لرقعة الرسم
slug: Web/API/Canvas_API
tags:
  - API
  - رقعة رسم
  - مرجع
  - نظرة عامة
translation_of: Web/API/Canvas_API
---
<div>{{CanvasSidebar}}</div>

<p class="summary">في <a href="/en-US/docs/HTML/HTML5">HTML5</a>، أُضيف عنصر HTML ‏{{HTMLElement("canvas")}} والذي يمكن استخدامه لرسم الرسوميات ببرمجتها عبر <a href="/en-US/docs/Web/JavaScript">جافاسكربت</a>. فمثلا، يمكن استخدامها لرسم الرسوم البيانية، أو تراكبات الصور، أو إنشاء الحركات أو حتى معالجة الفديوهات آنيا وتصييرها.</p>

<p>حصلت تطبيقات موزيلا على دعم <code>&lt;canvas&gt;</code> بدءًا من إصدارة جيكو رقم ١٫٨ (أي <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5">فَيَرفُكس ١٫٥</a>). طُوّر هذا العنصر على يد شركة آبل للوحة أوإس إكس وسفاري. يدعم إنترنت إكسبلورر <code>&lt;canvas&gt;</code> بدءًا من الإصدارة التاسعة فما فوق، بينما الإصدارات الأقدم منه تحتاج سكربتا ليعمل عنصر رقعة الرسم بكفاءة، هذا السكربت هو من مشروع جوجل باسم <a href="https://github.com/arv/explorercanvas">Explorer Canvas</a>. يدعم جوجل كروم وأوبرا ٩ عتصر <code>&lt;canvas&gt;</code> أيضا.</p>

<p>يُستخدم عنصر <code>&lt;canvas&gt;</code> في تقنية <a href="/en-US/docs/Web/WebGL">WebGL</a> أيضا لرسم الرسومات ثلاثية الأبعاد على صفحات الوب بتسريع عتادي.</p>

<h2 id="مثال">مثال</h2>

<p>هذه عيّنة مقتطفة من كود يستخدم طريقة {{domxref("CanvasRenderingContext2D.fillRect()")}}.</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
</pre>

<h3 id="جافاسكربت">جافاسكربت</h3>

<pre class="brush: js">var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);
</pre>

<p>حرّر الكود أدناه لترى التغييرات تحدث آنيا في رقعة الرسم:</p>

<div class="hidden">
<h6 id="Playable_code">Playable code</h6>

<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
&lt;div class="playable-buttons"&gt;
  &lt;input id="edit" type="button" value="Edit" /&gt;
  &lt;input id="reset" type="button" value="Reset" /&gt;
&lt;/div&gt;
&lt;textarea id="code" class="playable-code"&gt;
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);&lt;/textarea&gt;
</pre>

<pre class="brush: js">var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var edit = document.getElementById('edit');
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener('click', function() {
  textarea.focus();
})

textarea.addEventListener('input', drawCanvas);
window.addEventListener('load', drawCanvas);
</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>

<h2 id="المرجع">المرجع</h2>

<div class="index">
<ul>
 <li>{{domxref("HTMLCanvasElement")}}</li>
 <li>{{domxref("CanvasRenderingContext2D")}}</li>
 <li>{{domxref("CanvasGradient")}}</li>
 <li>{{domxref("CanvasImageSource")}}</li>
 <li>{{domxref("CanvasPattern")}}</li>
 <li>{{domxref("ImageBitmap")}}</li>
 <li>{{domxref("ImageData")}}</li>
 <li>{{domxref("RenderingContext")}}</li>
 <li>{{domxref("TextMetrics")}}</li>
 <li>{{domxref("OffscreenCanvas")}}{{experimental_inline}}</li>
 <li>{{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}</li>
</ul>
</div>

<p>الواجهات المتعلقة بِ‍ <code>WebGLRenderingContext</code> مذكورة في مرجع <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p>

<p>واجهة {{domxref("CanvasCaptureMediaStream")}} لها علاقة أيضا.</p>

<h2 id="الأدلة_والدروس">الأدلة والدروس</h2>

<dl>
 <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">درس رقعة الرسم</a></dt>
 <dd>درس شامل يغطي كلا من الاستخدام البسيط لرقعة الرسم <code>&lt;canvas&gt;</code> وأيضا مزاياها المتقدمة.</dd>
 <dt><a href="/en-US/Add-ons/Code_snippets/Canvas">مقتطفات من كود: رقعة الرسم</a></dt>
 <dd>بعض المقتطفات المخصصة لمطوري الامتدادات والتي تستخدم  <code>&lt;canvas&gt;</code>.</dd>
 <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demo: A basic ray-caster</a></dt>
 <dd>عرض لحركة تعقّب الأشعة باستخدام رقعة الرسم.</dd>
 <dt><a href="/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">رسم كائنات DOM في رقعة رسم</a></dt>
 <dd>طريقة رسم محتوى DOM (مثل عناصر HTML) في رقعة رسم.</dd>
 <dt><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">التعديل على الفديو باستخدام رقعة الرسم</a></dt>
 <dd>يمكنك بدمج {{HTMLElement("video")}} و{{HTMLElement("canvas")}} التلاعب والتعديل على الفديو آنيا.</dd>
</dl>

<h2 id="الموارد">الموارد</h2>

<h3 id="عامة">عامة</h3>

<ul>
 <li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas Deep Dive</a></li>
 <li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">كتيّب رقعة الرسم</a></li>
</ul>

<h3 id="المكتبات">المكتبات</h3>

<ul>
 <li><a href="http://fabricjs.com">Fabric.js</a> مكتبة رقعة رسم مفتوحة المصدر تأتي بإمكانيات تحليل SVG.</li>
 <li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> مكتبة رقعة رسم مفتوحة المصدر تركز على التفاعل في تطبيقات سطح المكتب والمحمول.</li>
 <li><a href="http://paperjs.org/">Paper.js</a> إطار عمل رسوميات متجهية مفتوح المصدر يعمل على رقعة رسم HTML5.</li>
 <li><a href="http://origamijs.com/docs/">Origami.js</a> مكتبة رقعة رسم خفيفة مفتوحة المصدر.</li>
 <li><a href="http://libcanvas.github.com/">libCanvas</a> إطار عمل رقعة رسم خفيف وقوي.</li>
 <li><a href="http://processingjs.org">Processing.js</a> نقل للغة التمثيل Processing.</li>
 <li><a href="https://playcanvas.com/">PlayCanvas</a> محرّك ألعاب مفتوح المصدر.</li>
 <li><a href="http://www.pixijs.com/">Pixi.js</a> محرّك ألعاب مفتوح المصدر.</li>
 <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> مكتبة للرسوم البيانية.</li>
 <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> واجهة برمجة تطبيقات تتعامل مع الإطارات المفتاحية للحركات لرقعة الرسم.</li>
 <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> إطار عمل WebGL لتمثيل البيانات، والبرمجة الخلّاقة وتطوير الألعاب.</li>
 <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> تُنشئ تمثيلات بيانات لرقعة الرسم ثنائية الأبعاد تفاعلية للوب.</li>
 <li><a href="http://www.createjs.com/easeljs">EaselJS</a> مكتبة مفتوحة المصدر حرة تسهّل استخدام رقعة الرسم للألعاب والفنون.</li>
 <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> مكتبة جافاسكربت مفتوحة المصدر لإنشاء وتعديل عناصر رقعة الرسم ثنائية الأبعاد.</li>
 <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> مكتبة مفتوحة المصدر لإنشاء خرائط حرارية بناء على رقعة الرسم.</li>
</ul>

<h2 id="المواصفات">المواصفات</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">المواصفة</th>
   <th scope="col">الحالة</th>
   <th scope="col">تعليق</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="طالع_أيضا">طالع أيضا</h2>

<ul>
 <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li>
</ul>