الفرق بين المراجعتين ل"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"> | ||
− | + | نص بديل يصف ماذا يظهر العنصر <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. |
==مصادر ومواصفات== | ==مصادر ومواصفات== | ||
*معيار [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}}]] | |
− | [[تصنيف: | + | [[تصنيف:HTML Elements|{{SUBPAGENAME}}]] |
− | [[تصنيف:HTML]] | + | [[تصنيف:HTML Scripting|{{SUBPAGENAME}}]] |
− | [[تصنيف:HTML |
المراجعة الحالية بتاريخ 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.
مصادر ومواصفات
- معيار HTML Living Standard.
- مواصفة HTML5.