دروس قماش HTML

يُستخدم عنصر <canvas> في HTML لرسم الرسومات على صفحة الويب.

تم إنشاء الرسم أعلاه باستخدام <canvas>.

يُظهر أربعة عناصر: مستطيل أحمر ، مستطيل متدرج ، مستطيل متعدد الألوان ، ونص متعدد الألوان.

ما هو HTML Canvas؟

يُستخدم عنصر <canvas> في HTML لرسم الرسومات بسرعة فائقة عبر البرمجة النصية (عادةً JavaScript).

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

يوجد في Canvas عدة طرق لرسم المسارات والمربعات والدوائر والنص وإضافة الصور.

تحدد الأرقام الموجودة في الجدول إصدار المتصفح الأول الذي يدعم عنصر <canvas> بشكل كامل.

Element
<canvas>	4.0	9.0	2.0	3.1	9.0

يمكن للقماش رسم نص ملون ، مع أو بدون رسوم متحركة.

تتمتع Canvas بميزات رائعة لعرض البيانات الرسومية مع صور الرسوم البيانية والمخططات.

يمكن أن تتحرك كائنات قماش. كل شيء ممكن: من الكرات المرتدة البسيطة إلى الرسوم المتحركة المعقدة.

يمكن أن تستجيب Canvas لأحداث JavaScript.

يمكن أن تستجيب Canvas لأي إجراء من إجراءات المستخدم (نقرات المفاتيح ونقرات الماوس ونقرات الأزرار وحركة الإصبع).

توفر طرق Canvas للرسوم المتحركة الكثير من الاحتمالات لتطبيقات ألعاب HTML.

في HTML ، يبدو عنصر <canvas> كما يلي:

يجب أن يحتوي عنصر <canvas> على سمة id حتى يمكن الإشارة إليه بواسطة JavaScript.

تعد سمة العرض والارتفاع ضرورية لتحديد حجم اللوحة القماشية.

نصيحة: يمكن أن يكون لديك عدة عناصر <canvas> في صفحة HTML واحدة.

افتراضيًا ، لا يحتوي عنصر <canvas> على حدود ولا محتوى.

لإضافة حد ، استخدم سمة النمط:

توضح الفصول التالية كيفية الرسم على القماش.