Canvas HTML5 در برابر SVG
- صفحه قبل SVG HTML5
- صفحه بعدی رسانه‌های HTML
canvas و SVG هر دو اجازه می‌دهند شما در مرورگر تصاویر ایجاد کنید، اما در اصل با هم متفاوت هستند.
SVG
SVG یک زبان است که برای توصیف تصاویر دو بعدی از طریق XML استفاده می‌شود.
SVG بر اساس XML است، این意味着 هر عنصر در SVG DOM قابل دسترسی است. می‌توانید رویدادهای JavaScript به یک عنصر متصل کنید.
در SVG، هر تصویری که ترسیم می‌شود به عنوان یک شیء در نظر گرفته می‌شود. اگر属性 SVG شیء تغییر کند، مرورگر می‌تواند به طور خودکار تصویر را بازسازی کند.
Canvas
canvas با استفاده از JavaScript ترسیم می‌شود.
canvas به صورت پیکسلی رندر می‌شود.
در canvas، پس از اینکه یک تصویر ترسیم شد، دیگر به توجه مرورگر نمی‌پردازد. اگر موقعیت آن تغییر کند، کل صحنه نیز نیاز به ترسیم مجدد دارد، از جمله هر چیزی که ممکن است توسط تصویر پوشیده شده باشد.
مقایسه canvas و SVG
در جدول زیر برخی از تفاوت‌های بین canvas و SVG آورده شده است.
Canvas
- وابسته به رزولوشن است
- پشتیبانی از پردازشگرهای رویداد را ندارد
- توانایی ضعیف در رندرینگ متن
- می‌توان نتایج تصویری را به فرمت‌های .png یا .jpg ذخیره کرد
- بهترین برای بازی‌های تصویری است که بسیاری از اشیاء به طور مداوم دوباره ترسیم می‌شوند
SVG
- نسبت به رزولوشن وابسته نیست
- پشتیبانی از پردازشگرهای رویداد
- بهترین برای برنامه‌هایی با منطقه‌های رندری بزرگ است (مثلاً نقشه‌های گوگل)
- 复杂性 بالا سرعت رندرینگ را کاهش می‌دهد (هر برنامه‌ای که از DOM بیش از حد استفاده کند سریع نیست)
- ن不相宜 برای برنامه‌های بازی
- صفحه قبل SVG HTML5
- صفحه بعدی رسانه‌های HTML
