حتى الآن ، تم تلخيص السمات الرئيسية لـ SVG و Canvas. إنها جميعها تقنيات عرض الرسومات ثنائية الأبعاد مدعومة في HTML5 ، وكلها تدعم رسومات المتجهات. الآن ، دعونا نقارن هاتين التقنيتين ونحلل نقاط قوتهم والسيناريوهات المعمول بها.
أولاً ، دعنا نحلل الميزات البارزة للتقنيتين وننظر إلى الجدول أدناه:
| قماش | SVG |
|---|---|
| بناء على وحدات البكسل (Dynamic.png) | بناء على الشكل |
| عنصر HTML واحد | عناصر رسومية متعددة تصبح جزءًا من DOM |
| تعديل فقط من خلال البرامج النصية | تعديل من خلال البرامج النصية و CSS |
| نموذج الحدث/تحبيب تفاعل المستخدم (x ، y) | نموذج الحدث/تجريد تفاعل المستخدم (RECT ، PATH) |
| أداء أفضل عندما تكون الصورة صغيرة وعدد الكائنات كبيرة (> 10K) (أو تم استيفاء كلاهما) | أداء أفضل عندما يكون عدد الكائنات صغيرة (<10k) ، صورة أكبر (أو تلبية الاثنين) |
من المقارنة أعلاه ، يمكننا أن نرى أن Canvas لها ميزة قوية في عملية بكسل ؛ في حين أن أكبر ميزة لـ SVG هي التفاعل المريح وقابليتها للتشغيل. يتأثر استخدام القماش بشكل كبير بحجم القماش (في الواقع عدد البكسلات) ، ويتأثر استخدام SVG بشكل كبير نسبيًا بعدد الكائنات (عدد العناصر). لا تزال القماش و SVG مختلفة من حيث طرق التعديل. بعد رسم كائن قماش ، لا يمكن تعديله باستخدام البرامج النصية و CSS. كائنات SVG هي جزء من نموذج كائن المستند ، بحيث يمكن تعديلها في أي وقت باستخدام البرامج النصية و CSS.
في الواقع ، Canvas هو نظام رسومات أنماط في الوقت الحقيقي قائم على البيكسل. بعد رسم الكائن ، لا يتم حفظ الكائن إلى الذاكرة. عندما تكون هناك حاجة إلى هذا الكائن مرة أخرى ، يجب إعادة صياغته ؛ SVG هو نظام رسومات نمط مستند إلى الشكل. بعد رسم الكائن ، سيتم حفظه في الذاكرة. عندما يحتاج إلى تعديل معلومات هذا الكائن ، يمكن تعديله مباشرة. وقد أدى هذا الاختلاف الأساسي إلى اختلافات في العديد من سيناريوهات التطبيق.
يمكننا أيضًا أن نفهم هذا في التطبيقات الشائعة التالية.
وثائق عالية الإخلاص هذا الجانب سهل الفهم. من أجل تصفح المستندات ، لا تشوه عند التحجيم ، أو الحاجة إلى طباعة المستندات عالية الجودة ، عادة ما يفضل SVG ، مثل خدمات الخريطة. موارد الصورة الثابتة غالبًا ما يتم استخدام SVG للصور البسيطة ، سواء كانت صورة في تطبيق أو صفحة ويب أو صورة كبيرة أو صورة صغيرة. نظرًا لأن SVG يتم تحميله في DOM ، أو على الأقل تم تحليله قبل إنشاء صورة ، سينخفض الأداء بشكل طفيف ، ولكن هذا الخسارة الكفاءة صغيرة للغاية مقارنة بتكلفة تقديم صفحة ويب (حوالي بضعة ميلي ثانية).من حيث حجم الملف (لغرض تقييم حركة مرور الشبكة) ، لا يختلف صورة SVG وحجم صورة PNG كثيرًا. ولكن نظرًا لأن SVG قابل للتطوير كتنسيق صورة ، فإن استخدام SVG هو خيار جيد جدًا إذا أراد المطورون استخدام الصورة على نطاق أوسع ، أو إذا كان المستخدمون يستخدمون شاشات ذات DPI عالية.
عملية بكسل عند استخدام القماش ، يمكنك الحصول على سرعة رسم سريعة دون الاحتفاظ بالمعلومات المقابلة للعنصر. خاصة عندما تحتاج عمليات البكسل إلى معالجة الأداء أفضل. تستخدم تقنية Canvas أساسًا لهذا النوع من التطبيقات. بيانات الوقت الحقيقي Canvas مثالية لتصور البيانات في الوقت الفعلي غير التفاعلي. على سبيل المثال ، بيانات الطقس في الوقت الفعلي. الرسوم البيانية والرسومات يمكنك استخدام SVG أو Canvas لرسم الرسومات والمخططات ذات الصلة ، ولكن إذا كنت ترغب في التأكيد على قابلية التشغيل ، فإن SVG هو بلا شك الخيار الأفضل. إذا كنت لا تحتاج إلى التفاعل وتؤكد الأداء ، فإن القماش أكثر ملاءمة. لعبة ثنائية الأبعاد نظرًا لأن معظم الألعاب تم تطويرها باستخدام واجهات برمجة التطبيقات ذات المستوى المنخفض ، فإن القماش يسهل قبوله. ولكن في الواقع ، عند رسم مشهد اللعبة ، تحتاج Canvas إلى رسم الشكل وتشكيله بشكل متكرر ، بينما يتم الحفاظ على SVG في الذاكرة ، وتعديل السمات ذات الصلة أمر سهل للغاية ، لذلك يعد SVG أيضًا اختيارًا جيدًا.لا يوجد اختلاف ضئيل في الأداء بين القماش و SVG عند إنشاء ألعاب مع العديد من الكائنات على لوحة لعبة صغيرة. ومع ذلك ، مع إنشاء المزيد من الكائنات ، سوف ينمو رمز القماش أكبر بكثير. نظرًا لأن كائن القماش يجب إعادة رسمه في كل مرة يتم فيها تنفيذ حلقة اللعبة ، فإن لعبة القماش تبطئ.
تصميم واجهة المستخدم بسبب تفاعلها الجيد ، فإن SVG أفضل بلا شك. مع العرض الرسومي للوضع المحتجز في SVG ، يمكنك إنشاء جميع تفاصيل واجهة المستخدم في علامات تشبه HTML في الجسم. نظرًا لأن كل عنصر من عناصر SVG وعنصر الطفل يمكن أن يستجيب للأحداث المنفصلة ، يمكنك إنشاء واجهات مستخدم معقدة بسهولة بالغة. تتطلب منك Canvas تحديد كيفية إنشاء كل جزء من واجهة المستخدم بترتيب رمز أكثر تعقيدًا. الطلب الذي تحتاج إلى متابعته هو:• الحصول على السياق.
• ابدأ الرسم.
• حدد لون كل سطر وكل ملء.
• تحديد الشكل.
• رسم كامل.
بالإضافة إلى ذلك ، لا يمكن قماش القماش سوى التعامل مع الأحداث في جميع أنحاء القماش. إذا كانت هناك واجهة مستخدم أكثر تعقيدًا ، فيجب عليك تحديد إحداثيات الموقع الذي تنقر عليه على القماش. يمكن لـ SVG التعامل مع الأحداث لكل عنصر طفل بشكل فردي.
يوضح المثالان التاليان المزايا التقنية ذات الصلة للقماش و SVG:
التطبيقات النموذجية للقماش مثل الشاشة الخضراء : http://samples.msdn.microsoft.com/workshop/samples/graphicsinhtml5/canvasgreenscreen.htmالعروض كما يلي:
بعد فتح الصفحة ، يمكنك عرض رمز مصدر الصفحة.
هذا التطبيق هو قراءة وكتابة وحدات البكسل من مقطعين فيديو إلى مقطع فيديو آخر ، ويستخدم الرمز مقطعين فيديو ، ولقلاتين ، وقماشية واحدة أخيرة. التقاط إطارًا واحدًا على الفيديو في وقت واحد ورسم على لوحين منفصلين ، مما يسمح بقراءة البيانات مرة أخرى:
ctxsource1.drawimage (video1 ، 0 ، 0 ، videoWidth ، videoheight) ؛
ctxsource2.drawImage (video2 ، 0 ، 0 ، videoWidth ، videoheight) ؛
لذا فإن الخطوة التالية هي استرداد البيانات لكل صورة مرسومة بحيث يمكن فحص كل بكسل فردي:
CurrentFramesource1 = ctxsource1.getimagedata (0 ، 0 ، videoWidth ، videoHeight) ؛
CurrentFramesource2 = ctxsource2.getimagedata (0 ، 0 ، videoWidth ، videoHeight) ؛
بعد الحصول عليها ، سوف يتصفح الرمز مجموعة البكسل من الشاشة الخضراء والبحث عن البكسلات الخضراء. إذا وجدت ، سيحل الرمز محل جميع وحدات البكسل الخضراء بالبكسل في مشهد الخلفية. :
لـ (var i = 0 ؛ i <n ؛ i ++)
{
// الاستيلاء على RBG لكل بكسل:
r = currentframesource1.data [i * 4 + 0] ؛
g = currentframesource1.data [i * 4 + 1] ؛
b = currentframesource1.data [i * 4 + 2] ؛
// إذا كان هذا يبدو وكأنه بكسل أخضر استبدله:
إذا ((r> = 0 && r <= 59) && (g> = 74 && g <= 144) && (b> = 0 && b <= 56)) // الهدف الأخضر هو (24 ، 109 ، 21) ، لذا انظر حول هذه القيم.
{
pixelindex = i * 4 ؛
CurrentFramesource1.Data [pixelindex] = currentframesource2.data [pixelindex] ؛
CurrentFramesource1.Data [pixelindex + 1] = currentframesource2.data [pixelindex + 1] ؛
CurrentFramesource1.Data [pixelindex + 2] = currentframesource2.data [pixelindex + 2] ؛
CurrentFramesource1.Data [pixelindex + 3] = currentframesource2.data [pixelindex + 3] ؛
}
}
أخيرًا ، تتم كتابة صفيف البكسل إلى القماش المستهدف:
ctxdest.putimagedata (currentframesource1 ، 0 ، 0) ؛
التطبيقات النموذجية لـ SVG تشبه واجهة المستخدم :<! doctype html>
<html>
<head>
<script type = "text/javaScript">
// يتم استدعاء هذه الوظيفة عند النقر فوق الدائرة.
وظيفة clickme () {
// عرض التنبيه.
تنبيه ("قمت بالنقر فوق عنصر SVG UI.") ؛
}
</script>
</head>
<body>
<H1>
واجهة المستخدم SVG
</h1>
<!- إنشاء جزء SVG. ->
<svg>
<!- إنشاء الدائرة. ->
<circle cx = "100" cy = "100" r = "50" fill = "gold" id = "uielement" onClick = "clickme () ؛"
/>
</svg>
<p>
انقر على عنصر واجهة المستخدم الدائري الذهبي.
</p>
</body>
</html>
على الرغم من أن هذا المثال بسيط ، إلا أنه يحتوي على جميع خصائص واجهة المستخدم. من هذا المثال ، نقدر مرة أخرى الطبيعة التفاعلية المريحة لـ SVG.
أخيرًا ، استخدم صورة لتلخيص التقنيات المناسبة لكل تطبيق. تمثل كل كتلة في الشكل نوعًا من التطبيق. كلما اقترب الأمر من نهاية معينة ، زادت المزايا التي يتعين عليها استخدامها هذه التكنولوجيا:
المرجع العملي:فهرس البرنامج النصي: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
مركز التطوير: https://developer.mozilla.org/en/svg
المرجع الشعبي: http://www.chinasvg.com/
المستند الرسمي: http://www.w3.org/tr/svg11/