يستخدم HTML5 قماش

هذا العنصر له فوائد أكثر من تكنولوجيا أخرى

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

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

ما HTML5 قماش يستخدم ل

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

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

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

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

وفقًا لمواصفات HTML5 ، يكون عنصر CANVAS:

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

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

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

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

قماش مفيد حتى إذا لم تخطط لاستخدام الفلاش

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

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

عندما تنظر في استخدام عنصر قماش

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

إذا كان جمهورك يستخدم في المقام الأول نظام Windows XP و IE 6 أو 7 أو 8 ، فسيكون إنشاء ميزة قماش ديناميكية غير ذي جدوى لأن هذه المتصفحات لا تدعمه.

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

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

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

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

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

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