تعليق: يمكن لكلا القماش و SVG أن يمكّنك من رسم الصور في المتصفح ، لكن مبادئهما الأساسية مختلفة. بعد ذلك ، سنقدم مبادئ الرسم في القماش و SVG. يمكن للأصدقاء المهتمين التعرف على ذلك.
يسمح لك Canvas و SVG برسم الصور في المتصفح ، لكن مبادئهما الأساسية مختلفة.SVG
SVG هي لغة تصف الرسومات ثنائية الأبعاد في XML.
تعتمد SVG على XML ، مما يعني أن كل عنصر متاح داخل SVG DOM. يمكنك إضافة معالج حدث JS إلى كل عنصر.
في SVG ، يتم تسجيل كل رسم بياني ككائن. إذا تم تغيير خصائص كائن SVG ، فيمكن للمتصفح تجديد الرسومات تلقائيًا.
قماش
Canvas قادر على رسم الرسومات ثنائية الأبعاد عند الطيران (باستخدام JS)
يمكن تجديد القماش بواسطة وحدات البكسل.
في قماش ، بمجرد اكتمال الرسومات ، يتم نسيانها من قبل المتصفح. إذا كان من المفترض أن يتغير موضع الرسومات ، فيجب إعادة طلاء الشاشة بأكملها ، بما في ذلك الكائنات التي تغطيها الرسومات.
المقارنة بين القماش و SVG
يوضح الجدول التالي الاختلافات الرئيسية بين القماش و SVG:
قماش SVG
تعتمد على القرار بشكل مستقل عن القرار
معالج الأحداث غير مدعوم
إمكانيات عرض النص الضعيفة هي الأنسب للتطبيقات ذات المناطق الكبيرة التقديم (خرائط Google)
يمكنك حفظ الصورة النهائية مثل صور PNG أو JPG المعقدة ، وسوف يتباطأ إعادة الطلاء (أي موقف يستخدم فيه DOM يتباطأ)
أفضل الألعاب الرسومية المناسبة للعديد من الكائنات التي يتم إعادة رسمها في كثير من الأحيان ليست مناسبة لتطبيقات الألعاب