قماش HTML5: ما هو ولماذا يتم استخدامه

HTML5 يتضمن عنصرًا مثيرًا يسمى CANVAS. له العديد من الاستخدامات ، ولكن من أجل استخدامه ، تحتاج إلى تعلم بعض JavaScript ، لغة البرمجة، وأحيانا CSS.

هذا يجعل عنصر CANVAS شاقًا بعض الشيء للعديد من المصممين ، وفي الواقع ، سيتجاهله معظمهم على الأرجح العنصر حتى تتوفر أدوات موثوقة لإنشاء رسوم متحركة وألعاب CANVAS دون علم جافا سكريبت.

ما الغرض من استخدام HTML5 Canvas

يمكن استخدام عنصر HTML5 CANVAS للعديد من الأشياء التي كان عليك في السابق استخدام تطبيق مضمن مثل Flash لإنشاء:

• رسومات ديناميكية
• ألعاب على الإنترنت وغير متصلة بالإنترنت
• الرسوم المتحركة
• الفيديو والصوت التفاعلي

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

إذا كان لدينا فلاش ، فلماذا نحتاج إلى قماش؟

وفقا ل مواصفات HTML5، عنصر CANVAS هو: "... لوحة رسم نقطية تعتمد على الدقة ، والتي يمكن استخدامها لعرض الرسوم البيانية ، أو رسومات الألعاب ، أو الفن ، أو الصور المرئية الأخرى أثناء التنقل."

يتيح لك عنصر CANVAS رسم الرسوم البيانية والرسومات والألعاب والفن والمرئيات الأخرى مباشرة على صفحة الويب في الوقت الفعلي.

قد تفكر في أنه يمكننا فعل ذلك بالفعل باستخدام Flash ، ولكن هناك اختلافان رئيسيان بين CANVAS و Flash:

1. تم تضمين عنصر CANVAS في HTML مباشرةً. البرامج النصية التي تعتمد عليها إما في HTML أو في ملف خارجي مرتبط. هذا يعني أن عنصر CANVAS هو جزء من نموذج كائن المستند (DOM).
   1. الفلاش هو ملف خارجي مضمن. يستخدم إما عنصر EMBED أو OBJECT لعرضه ، ولا يمكنه التفاعل مباشرة مع عناصر HTML الأخرى. نظرًا لأن عنصر CANVAS هو جزء من DOM ، فيمكنه التفاعل مع DOM بعدة طرق.
   2. على سبيل المثال ، يمكنك إنشاء رسم متحرك يتغير عند تفاعل جزء آخر من الصفحة - مثل تعبئة عنصر النموذج. باستخدام Flash ، سيكون أقصى ما يمكنك فعله هو بدء تشغيل ملف فيلم فلاش أو الرسوم المتحركة ، ولكن باستخدام CANVAS ، يمكنك إنشاء العديد من التأثيرات المختلفة ، حتى إضافة النص من حقل النموذج إلى الرسوم المتحركة.
2. عنصر CANVAS مدعوم أصلاً بواسطة متصفحات الويب. حتى يتمكن المستخدمون من استخدام Flash فعليًا ، يجب أن يكون المكوّن الإضافي مثبتًا في المتصفح الخاص بهم. غالبًا ما يكون هذا أمرًا مزعجًا لمعظم الأشخاص بسبب عمليات تثبيت Flash القديمة أو حقيقة أن نظام التشغيل الخاص بهم لا يدعمه ببساطة.
   1. كان من المعتاد أن يكون البرنامج المساعد مثبتًا على كل متصفح ، ولكن لم يعد هذا هو الحال ، بل إن الكثير منهم يزيلون المكون الإضافي بسبب الصعوبات. بالإضافة إلى ذلك ، فهو غير متوفر حتى على المشهور منصة iOS.

يعد Canvas مفيدًا حتى لو لم تكن تخطط لاستخدام الفلاش مطلقًا

أحد الأسباب الرئيسية التي تجعل عنصر CANVAS مربكًا للغاية هو أن العديد من المصممين قد اعتادوا على شبكة ويب ثابتة تمامًا. قد تكون الصور متحركة ، ولكن يتم ذلك باستخدام GIF، وبالطبع ، يمكنك تضمين الفيديو في الصفحات ولكن مرة أخرى ، إنه مقطع فيديو ثابت يتم وضعه ببساطة على الصفحة وربما يبدأ أو يتوقف بسبب التفاعل ، ولكن هذا كل شيء.

يتيح لك عنصر CANVAS إضافة قدر أكبر من التفاعل إلى صفحات الويب الخاصة بك لأنه يمكنك الآن التحكم في الرسومات والصور والنص بشكل ديناميكي باستخدام لغة البرمجة النصية. يساعدك عنصر CANVAS في تحويل الصور والصور والمخططات والرسوم البيانية إلى عناصر متحركة.

متى تفكر في استخدام عنصر Canvas

يجب أن يكون جمهورك هو الاعتبار الأول عند اتخاذ قرار باستخدام عنصر CANVAS.

إذا كان جمهورك يستخدم بشكل أساسي ويندوز إكس بي و IE 6 أو 7 أو 8 ، فإن إنشاء ميزة لوحة ديناميكية سيكون بلا فائدة لأن هذه المتصفحات لا تدعمها.

إذا كنت تقوم بإنشاء تطبيق سيتم استخدامه على أجهزة Windows فقط ، فقد يكون Flash هو أفضل رهان لك. يمكن أن يستفيد التطبيق الذي سيتم استخدامه على أجهزة كمبيوتر Windows و Mac من تطبيق Silverlight.

ومع ذلك ، إذا كان التطبيق الخاص بك بحاجة إلى أن يتم عرضه على الأجهزة المحمولة (كل من Android و iOS) وكذلك الحديث أجهزة كمبيوتر سطح المكتب (محدثة إلى أحدث إصدارات المتصفح) ، ثم يعد استخدام عنصر CANVAS اختيارًا جيدًا.

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

ومع ذلك ، لا يوصى باستخدام لوحة HTML5 في كل شيء. يجب مطلقا استخدمه لأشياء مثل الشعار أو العنوان أو التنقل (على الرغم من أن استخدامه لتحريك جزء من أي منها سيكون جيدًا).

وفقًا للمواصفات ، يجب عليك استخدام العناصر الأكثر ملاءمة لما تحاول بناءه. لذا فإن استخدام عنصر HEADER مع الصور والنص أفضل من استخدام عنصر CANVAS في العنوان والشعار.

أيضًا ، إذا كنت تقوم بإنشاء ملف صفحة على الإنترنت أو التطبيق الذي يُقصد استخدامه في وسيط غير تفاعلي مثل الطباعة ، يجب أن تدرك أن عنصر CANVAS الذي تم تحديثه ديناميكيًا قد لا يطبع كما هو متوقع. قد تحصل على نسخة مطبوعة من المحتوى الحالي أو المحتوى الاحتياطي.