علامة <canvas> HTML

التعريف والاستخدام

<canvas> تُرسم العلامات عادةً باستخدام السكربت (عادةً JavaScript) في الوقت الحقيقي.

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

في متصفحات لا تدعم <canvas> في متصفحات حيث تم تعطيل الجافا سكريبت وعدم دعم <canvas> سيتم عرض

نص في داخل العنصر.

تعلم المزيد عن <canvas> معرفة المزيد عن العنصر.

للحصول على مرجع كامل لجميع الخصائص والطرق، يرجى زيارة دليل مرجعي للواجهة الرسومية HTML.

مثال

مثال 1

رسم مستطيل أحمر حقيقي في الوقت الفعلي وعرضه في عنصر <canvas>:

<canvas id="myCanvas">
متصفحك لا يدعم علامة التبويب canvas.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

تجربة شخصية

مثال 2

مثال آخر لـ <canvas>:

<canvas id="myCanvas">
متصفحك لا يدعم علامة التبويب canvas.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
//فتح الشفافية
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

تجربة شخصية

خصائص

خصائص القيمة وصف
ارتفاع قيمة البكسل يحدد ارتفاع اللوحة. القيمة الافتراضية هي 150.
عرض قيمة البكسل يحدد عرض اللوحة. القيمة الافتراضية هي 300.

خصائص العالمية

<canvas> الدعم عن طريق خصائص العالمية في HTML.

خصائص الحدث

<canvas> الدعم عن طريق خصائص الحدث في HTML.

إعدادات CSS الافتراضية

معظم المتصفحات ستعرض القيم التالية كقيم افتراضية <canvas> العنصر:

canvas {
  ارتفاع العرض: 150px;
  عرض العرض: 300px;
}

تجربة شخصية

تاريخ <canvas>

هذا العنصر HTML مصمم للرسومات المتجهة للعميل. ليس له سلوكيات الخاصة به، لكنه يقدم API رسم للجافا سكريبت على العميل لتمكين السكربت من رسم أي شيء يريد رسمه على لوحة رسم.

تم إدخال علامة <canvas> بواسطة Apple في متصفح Safari 1.3. السبب في هذه التوسعة الجذري لـ HTML هو أن قدرة Safari على الرسم تستخدم أيضًا في مكون Dashboard لمستخدمي Mac OS X، ويريد Apple أن يكون هناك طريقة لدعم الرسومات المبرمجة في Dashboard.

سارت Firefox 1.5 وOpera 9 في خطى Safari. هذان المتصفحان يدعمان علامة <canvas>.

نحن حتى نستطيع استخدام علامة <canvas> في IE، وبناء دعم الجدولية على دعم VML في IE باستخدام رمز JavaScript المفتوح المصدر (من إطلاق Google). الرجوع إلى:http://excanvas.sourceforge.net/.

جهود ترقية <canvas> معززة من قبل اتحاد غير رسمي لمصنعي المتصفحات، حيث أصبح <canvas> الآن علامة رسمية في مشروع HTML 5. الرجوع إلى:http://www.whatwg.org/specs/web-apps/current-work/

الاختلافات بين علامة <canvas> وSVG وVML.

من بين الاختلافات بين علامة <canvas> وSVG وVML، أن <canvas> يحتوي على API للرسم مبنى على JavaScript، بينما يستخدم SVG وVML وثيقة XML لوصف الرسم.

هذه الطريقتان متساويتان في الوظيفة، يمكن استخدام أي منهما لتقليد الأخرى. من حيث الشكل، تبدوان مختلفتين، ولكن كل منهما لها قوتها وضعفها. على سبيل المثال، يسهل تعديل الرسومات SVG فقط عن طريق إزالة العناصر من وصفها.

لإزالة عنصر من نفس الشكل في علامة <canvas>، غالبًا ما يتطلب مسح الرسم وإعادة رسمه.

كيفية استخدام علامة <canvas> للرسم.

معظم API للرسم في Canvas لم يتم تعريفها على عنصر <canvas> نفسه، بل تم تعريفها من خلال رسم. طريقة getContext().الحصول على عنوان “بيئة الرسم”.

يستخدم API Canvas أيضًا طريقة التعبير عن المسار. ولكن، يتم تعريف المسار عن طريق سلسلة من الاستدعاءات النصية، وليس بوصفه سلسلة من الأحرف والأرقام، مثل الاستدعاءات beginPath() وarc().

بعد تعريف المسار، فإن الطرق الأخرى مثل fill() هي لتحديد هذا المسار. تحدد خصائص بيئة الرسم مثل fillStyle كيفية استخدام هذه العمليات.

التعليقات:من السبب في أن Canvas API مركزة للغاية أنها لا توفر أي دعم للنصوص. لإضافة نص إلى رسم <canvas>، يجب إما رسم النص يدويًا ثم دمج صورة البتة معه، أو استخدام التوجيه CSS للتعامل مع النصوص HTML فوق <canvas>.

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

الرقم في الجدول يوضح إصدار المتصفح الذي يدعم العنصر بشكل كامل أولاً.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0