عنصر Canvas

الموسوعة الحرة

تتيح عناصر HTML Canvas عرضًا ديناميكيًا وقابلًا للبرمجة للأشكال ثنائية الأبعاد والصور النقطية . تم تقديمها في HTML5 ، وهي نموذج إجرائي منخفض المستوى يقوم بتحديث الصورة النقطية . كما تُساعد هذه العناصر في تطوير ألعاب ثنائية الأبعاد .<canvas>

بينما يوفر العنصر واجهة برمجة تطبيقات الرسم ثنائية الأبعاد الخاصة به ، فإنه يدعم أيضًا واجهة برمجة تطبيقات WebGL للسماح بالعرض ثلاثي الأبعاد باستخدام OpenGL ES .<canvas>

تاريخ

طُرحت تقنية Canvas لأول مرة من قِبل شركة Apple لاستخدامها في مكون WebKit الخاص بنظام التشغيل Mac OS X عام 2004، [ 1 ] حيث دعمت تطبيقات مثل أدوات لوحة التحكم ومتصفح Safari . لاحقًا، في عام 2005، تم اعتمادها في الإصدار 1.8 من متصفحات Gecko ، [ 2 ] وفي متصفح Opera عام 2006، [ 3 ] وتم توحيدها من قِبل مجموعة عمل تقنية تطبيقات النصوص التشعبية على الويب (WHATWG) بناءً على المواصفات المقترحة الجديدة لتقنيات الويب من الجيل التالي. [ 4 ]

الاستخدام

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

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

مثال

الكود التالي ينشئ عنصرًا في صفحة HTML:<canvas>

< canvas id = "example" width = "200" height = "200" > يظهر هذا النص إذا كان متصفحك لا يدعم عنصر HTML canvas. </ canvas >

باستخدام جافا سكريبت ، يمكنك الرسم على اللوحة:

var example = document.getElementById ( ' example' ) ; var context = example.getContext ( ' 2d ' ) ; context.fillStyle = ' red ' ; context.fillRect ( 30 , 30 , 50 , 50 ) ;

يرسم هذا الكود مستطيلاً أحمر على الشاشة.

توفر واجهة برمجة تطبيقات Canvas أيضًا save()وظائف restore()لحفظ واستعادة جميع سمات سياق اللوحة.

حجم عنصر اللوحة القماشية مقابل حجم سطح الرسم

تحتوي لوحة الرسم في الواقع على حجمين: حجم العنصر نفسه وحجم سطح الرسم الخاص به. يؤدي تحديد سمات العرض والارتفاع للعنصر إلى تحديد كلا الحجمين؛ بينما تؤثر سمات CSS على حجم العنصر فقط دون سطح الرسم.

افتراضيًا، يبلغ حجم عنصر اللوحة (canvas) وحجم سطح الرسم الخاص به 300 بكسل عرضًا و150 بكسل ارتفاعًا. في المثال الموضح، والذي يستخدم CSS لتحديد حجم عنصر اللوحة، يبلغ حجم العنصر 600 بكسل عرضًا و300 بكسل ارتفاعًا، بينما يبقى حجم سطح الرسم ثابتًا عند القيمة الافتراضية 300 بكسل × 150 بكسل. عندما لا يتطابق حجم عنصر اللوحة مع حجم سطح الرسم، يقوم المتصفح بتغيير حجم سطح الرسم ليناسب العنصر (مما قد يؤدي إلى نتائج غير متوقعة وغير مرغوب فيها).

مثال على ضبط حجم العنصر وحجم سطح الرسم على قيم مختلفة:

< !DOCTYPE html> <html> <head> <title> حجم عنصر Canvas : 600 × 300 ،حجم سطح الرسم على اللوحة : 300 × 150 </title> <style> body { background : #dddddd ; } #canvas { margin : 20px ; padding : 20px ; background : #ffffff ; border : thin inset #aaaaaa ; width : 600px ; height : 300px ; } </style> </head> <body> < canvas id = " canvas " >​​​​​ لا يدعم Canvas </canvas> </body> </html>​​​​​​

مقارنة بين الرسم على اللوحة (Canvas) والرسومات المتجهة القابلة للتوسيع (SVG)

SVG هو أسلوب بديل لرسم الأشكال في المتصفحات. [ 5 ] على عكس Canvas، الذي يعتمد على الصور النقطية ، يعتمد SVG على المتجهات ، بحيث يتم تخزين كل شكل مرسوم ككائن في مخطط المشهد أو نموذج كائن المستند ، والذي يتم عرضه لاحقًا كصورة نقطية . هذا يعني أنه إذا تم تغيير سمات كائن SVG، يمكن للمتصفح إعادة عرض المشهد تلقائيًا.

أما عناصر Canvas، فتُرسم في الوضع الفوري . في مثال Canvas المذكور أعلاه، تُعدّل عملية رسم المستطيل Canvas، ويتجاهل النظام تمثيله كمستطيل. إذا تغير موضع المستطيل، فسيتعين إعادة رسم Canvas، بما في ذلك أي عناصر قد يكون المستطيل قد غطاها. في حالة SVG المكافئة، يمكن ببساطة تغيير سمات موضع المستطيل، وسيحدد المتصفح كيفية إعادة رسمه. توجد مكتبات JavaScript إضافية تُجرّد نموذج Canvas لتوفير إمكانيات مشهد شبيهة بـ SVG داخل عنصر Canvas. كما يمكن استخدام طبقات Canvas متعددة، مما يعني أنه لا يلزم إعادة إنشاء سوى طبقات محددة عند الحاجة إلى إجراء تغييرات.

يتم تمثيل صور SVG في XML ، ويمكن إنشاء المشاهد المعقدة وصيانتها باستخدام أدوات تحرير XML.

يُمكّن مخطط المشهد SVG من ربط معالجات الأحداثonClick بالكائنات، بحيث يمكن للمستطيل الاستجابة لحدث ما. وللحصول على نفس الوظيفة باستخدام لوحة الرسم، يجب مطابقة إحداثيات نقرة الماوس يدويًا مع إحداثيات المستطيل المرسوم لتحديد ما إذا تم النقر عليه.

من الناحية النظرية، تُعدّ Canvas واجهة برمجة تطبيقات منخفضة المستوى، يُمكن بناء واجهات أعلى مستوى عليها (مثل دعم SVG). توجد مكتبات JavaScript تُوفّر تطبيقات جزئية لـ SVG باستخدام Canvas للمتصفحات التي لا تدعم SVG ولكنها تدعم Canvas، مثل متصفحات Android 2.x. مع ذلك، هذا ليس هو الحال عادةً، فهما معياران مستقلان. يزداد الوضع تعقيدًا لوجود مكتبات لرسم المشهد خاصة بـ Canvas، ولأن SVG تتضمن بعض وظائف معالجة الصور النقطية.

ردود الفعل

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

الملكية الفكرية على القماش

في 14 مارس 2007، أعاد ديف هيات، مطور WebKit ، توجيه بريد إلكتروني من هيلين بلوتكا وركمان، كبيرة مستشاري براءات الاختراع في شركة آبل، [ 7 ] ينص على أن آبل تحتفظ بجميع حقوق الملكية الفكرية المتعلقة بمسودة عمل تطبيقات الويب 1.0 الصادرة عن مجموعة عمل تطبيقات الويب (WHATWG) بتاريخ 24 مارس 2005، القسم 10.1، بعنوان "الرسومات: لوحة الصور النقطية"، [ 8 ] ولكنها تركت الباب مفتوحًا لترخيص براءات الاختراع في حال نُقلت المواصفات إلى هيئة معايير لديها سياسة رسمية بشأن براءات الاختراع . أثار هذا الأمر نقاشًا واسعًا بين مطوري الويب، وطرح تساؤلات حول افتقار مجموعة عمل تطبيقات الويب (WHATWG) إلى سياسة واضحة بشأن براءات الاختراع، مقارنةً بتفضيل اتحاد شبكة الويب العالمية (W3C) الصريح للتراخيص المجانية. لاحقًا، كشفت آبل عن براءات الاختراع بموجب شروط ترخيص براءات الاختراع المجانية الخاصة باتحاد شبكة الويب العالمية (W3C). [ 9 ] يعني هذا الإفصاح أن شركة آبل ملزمة بتوفير ترخيص مجاني لبراءة الاختراع كلما أصبح عنصر Canvas جزءًا من توصية مستقبلية صادرة عن اتحاد شبكة الويب العالمية (W3C) من قِبل فريق عمل HTML. [ 10 ]

مخاوف الخصوصية

تُعدّ تقنية بصمة المتصفح (Canvas Fingerprinting) إحدى تقنيات بصمة المتصفح العديدة المستخدمة لتتبع مستخدمي الإنترنت، والتي تُمكّن المواقع الإلكترونية من تحديد الزوار وتتبعهم باستخدام عنصر HTML. وقد حظيت هذه التقنية بتغطية إعلامية واسعة في عام 2014، [ 11 ] [ 12 ] [ 13 ] [ 14 ] بعد أن وصفها باحثون من جامعة برينستون وجامعة لوفين الكاثوليكية في ورقتهم البحثية "الويب لا ينسى أبدًا" . [ 15 ] وتتمحور المخاوف المتعلقة بخصوصية المستخدمين بشأن بصمة المتصفح حول حقيقة أن حذف ملفات تعريف الارتباط ومسح ذاكرة التخزين المؤقت لن يكون كافيًا لتجنب التتبع عبر الإنترنت.<canvas>

دعم المتصفح

يدعم هذا العنصر الإصدارات الحالية من متصفحات Mozilla Firefox و Google Chrome و Internet Explorer و Safari و Konqueror و Opera [ 16 ] و Microsoft Edge . [ 17 ]

انظر أيضاً

مراجع

  1. ↑ إيان هيكسي (12 يوليو 2004). "توسيع لغة HTML" . تم الاطلاع عليه بتاريخ 13 يونيو 2011 .
  2. ↑ موقع مطوري موزيلا. "HTMLCanvasElement" . مؤرشف من الأصل بتاريخ 4 يونيو 2011. تم الاطلاع عليه بتاريخ 13 يونيو 2011 .
  3. ↑ "سجل تغييرات أوبرا 9.0" . تم الاطلاع عليه بتاريخ 20 يونيو 2006 .{{cite web}}: CS1 maint: deprecated archiveal service ( link )
  4. ↑ "معيار HTML" . html.spec.whatwg.org . تم الاطلاع عليه بتاريخ 2025-02-09 .
  5. ↑ "الرسومات المتجهة القابلة للتوسيع | CorelDRAW" . www.coreldraw.com . تم الاطلاع عليه بتاريخ 23-09-2022 .
  6. ↑ ملاحظات إيان هيكسون بشأن Canvas وامتدادات Apple الأخرى لـ HTML
  7. ↑ "[whatwg] مسودة تطبيقات الويب 1.0، ديفيد هيات، الأربعاء 14 مارس 2007، الساعة 2:31:53 مساءً بتوقيت المحيط الهادئ" . مؤرشف من الأصل في 2 مايو 2007. تم الاطلاع عليه في 1 مايو 2007 .
  8. ↑ تطبيقات الويب 1.0 مسودة عمل مبكرة - الرسومات الديناميكية: لوحة الرسم النقطي
  9. ↑ حالة سياسة براءات الاختراع لمجموعة عمل HTML  – الإفصاحات المعروفة
  10. ↑ سياسة براءات الاختراع الخاصة بـ W3C المستخدمة من قبل مجموعة عمل HTML
  11. ↑ نيبس، كيت (21 يوليو 2014). "ما تحتاج لمعرفته حول أداة التتبع الجديدة الأكثر خبثًا على الإنترنت" . جيزمودو . تم الاطلاع عليه في 21 يوليو 2014 .
  12. ↑ جوزيف شتاينبرغ (23 يوليو 2014). "أنت مراقب على الإنترنت بواسطة تقنية جديدة خبيثة - إليك ما تحتاج إلى معرفته" . فوربس . تم الاطلاع عليه في 15 نوفمبر 2014 .
  13. ↑ أنجوين، جوليا (21 يوليو 2014). "تعرّف على جهاز التتبع الإلكتروني الذي يكاد يكون من المستحيل حظره" . برو بابليكا . تم الاطلاع عليه في 21 يوليو 2014 .
  14. ↑ كيرك، جيريمي (21 يوليو 2014). "أدوات التتبع الخفية على الإنترنت تشكل مخاطر متزايدة على خصوصية المستخدمين" . بي سي وورلد . تم الاطلاع عليه في 21 يوليو 2014 .
  15. ↑ أكار، غونيش؛ يوبانك، كريستيان؛ إنجلهارت، ستيفن؛ خواريز، مارك؛ نارايانان، أرفيند؛ دياز، كلوديا (24 يوليو 2014). "الويب لا ينسى أبدًا: آليات التتبع المستمرة في الواقع" . تم الاطلاع عليه بتاريخ 24 يوليو 2014 .
  16. ↑ سوكان، ميهاي (4 فبراير 2010). "SVG أم Canvas؟ الاختيار بينهما" . برمجيات أوبرا . مؤرشف من الأصل في 23 يونيو 2010. تم الاطلاع عليه في 3 مايو 2010 .
  17. ↑ "Canvas، وثائق Microsoft Edge" .