الفرق بين المراجعتين ل"HTML/canvas"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
 
ط
 
(5 مراجعات متوسطة بواسطة مستخدم واحد آخر غير معروضة)
سطر 5: سطر 5:
 
<syntaxhighlight lang="html">
 
<syntaxhighlight lang="html">
 
<canvas id="canvas" width="300" height="300">
 
<canvas id="canvas" width="300" height="300">
   An alternative text describing what your canvas displays.  
+
   نص بديل يصف ماذا يظهر العنصر <code>canvas</code>.
 
</canvas>
 
</canvas>
 
</syntaxhighlight>وبفرض أننا سنرسم مستطيلًا بأبعاد 80×80 باللون الأحمر، فستكون شيفرة [[JavaScript]] كالآتي:<syntaxhighlight lang="html">
 
</syntaxhighlight>وبفرض أننا سنرسم مستطيلًا بأبعاد 80×80 باللون الأحمر، فستكون شيفرة [[JavaScript]] كالآتي:<syntaxhighlight lang="html">
 
<script>
 
<script>
var canvas = document.getElementById("canvas");
+
  var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
+
  var context = canvas.getContext("2d");
context.fillStyle = "#FF0000";
+
  context.fillStyle = "#FF0000";
context.fillRect(0, 0, 80, 80);
+
  context.fillRect(0, 0, 80, 80);
 
</script>
 
</script>
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 +
== بطاقة العنصر ==
 
{| class="wikitable" style="width: 100%;"
 
{| class="wikitable" style="width: 100%;"
 
|-
 
|-
سطر 65: سطر 66:
  
 
=== أبعاد إطار الرسم ===
 
=== أبعاد إطار الرسم ===
يمكن تغيير أبعاد إطار الرسم باستخدام CSS، وستُغيّر أبعاد الصورة لكي تتسع في الأبعاد المُحدَّدة عبر CSS، وإذا ظهرت الرسمة مشوهةً فجرِّب تحديد الأبعاد عبر الخاصيتين <code>[[#width|width]]</code> و <code>[[#height|height]]</code> في العنصر <code><canvas></code> بدلًا من استخدام CSS.
+
يمكن تغيير أبعاد إطار الرسم باستخدام [[CSS]]، وستُغيّر أبعاد الصورة لكي تتسع في الأبعاد المُحدَّدة عبر [[CSS]]، وإذا ظهرت الرسمة مشوهةً فجرِّب تحديد الأبعاد عبر الخاصيتين <code>[[#width|width]]</code> و <code>[[#height|height]]</code> في العنصر <code><canvas></code> بدلًا من استخدام CSS.
  
 
==مصادر ومواصفات==
 
==مصادر ومواصفات==
 
*معيار [https://html.spec.whatwg.org/multipage/scripting.html#the-canvas-element HTML Living Standard].
 
*معيار [https://html.spec.whatwg.org/multipage/scripting.html#the-canvas-element HTML Living Standard].
 
*مواصفة [http://www.w3.org/TR/html5/scripting-1.html#the-canvas-element HTML5].
 
*مواصفة [http://www.w3.org/TR/html5/scripting-1.html#the-canvas-element HTML5].
 
+
[[تصنيف:HTML|{{SUBPAGENAME}}]]
[[تصنيف:Scripting]]
+
[[تصنيف:HTML Elements|{{SUBPAGENAME}}]]
[[تصنيف:HTML]]
+
[[تصنيف:HTML Scripting|{{SUBPAGENAME}}]]
[[تصنيف:HTML Elements]]
 

المراجعة الحالية بتاريخ 16:07، 7 أكتوبر 2022

استخدم العنصر <canvas> مع الواجهة البرمجية الخاصة به لترسم الرسومات وتحركها.

المثال الآتي سيُضيف عنصر <canvas> إلى مستند HTML، مع تحديد ارتفاعه عبر الخاصية height وعرضه عبر الخاصية width، وسنوفِّر نصًا بديلًا إن لم يكن المتصفح قادرًا على عرض العنصر، فمن المفيد توفير محتوى بديل لزيادة قابلية الوصول لمحتوى العنصر.

<canvas id="canvas" width="300" height="300">
  نص بديل يصف ماذا يظهر العنصر <code>canvas</code>.
</canvas>

وبفرض أننا سنرسم مستطيلًا بأبعاد 80×80 باللون الأحمر، فستكون شيفرة JavaScript كالآتي:

<script>
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  context.fillStyle = "#FF0000";
  context.fillRect(0, 0, 80, 80);
</script>

بطاقة العنصر

تصنيفات المحتوى عنصر تنظيمي أو عنصر عادي أو عنصر يحتوي وسائط مضمّنة.
المحتوى المسموح أي محتوى ليس له خلفية.
الوسم المختصر لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب أي عنصر يقبل المحتوى التضميني.
واجهة DOM HTMLCanvasElement

دعم المتصفحات

Chrome Firefox Edge Safari Opera
مدعوم مدعوم مدعوم مدعوم مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

height

ارتفاع إطار الرسم في عنصر <canvas> بواحدة البكسل، القيمة الافتراضية هي 150.

width

عرض إطار الرسم في عنصر <canvas> بواحدة البكسل، القيمة الافتراضية هي 300.

ملاحظات الاستخدام

المحتوى البديل

يمكنك (ويفترض بك) توفير محتوى بديل داخل العنصر <canvas>، وهذا المحتوى سيُعرَض في المتصفحات القديمة التي لا تدعم هذا العنصر وفي المتصفحات التي عطّل المستخدم فيها تشغيل JavaScript.

يجب استخدام وسم الإغلاق

على النقيض من العنصر <img>، يفترض توفير وسم الإغلاق <‎/canvas>.

أبعاد إطار الرسم

يمكن تغيير أبعاد إطار الرسم باستخدام CSS، وستُغيّر أبعاد الصورة لكي تتسع في الأبعاد المُحدَّدة عبر CSS، وإذا ظهرت الرسمة مشوهةً فجرِّب تحديد الأبعاد عبر الخاصيتين width و height في العنصر <canvas> بدلًا من استخدام CSS.

مصادر ومواصفات