HTML 5 Canvas vs. SVG

Canvas i SVG pozwalają tworzyć grafiki w przeglądarce, ale są zupełnie różne.

SVG

SVG jest językiem opisanym za pomocą XML do opisywania 2D grafik.

SVG oparty jest na XML, co oznacza, że każdy element w SVG DOM jest dostępny. Możesz dodać do elementu处理器

W SVG, każdy narysowany grafik jest traktowany jako obiekt. Jeśli zmienią się właściwości obiektu SVG, przeglądarka automatycznie ponownie wyświetli grafikę.

Canvas

Canvas rysuje 2D grafikę za pomocą JavaScript.

Canvas jest renderowany pixel po pixelu.

W canvas, po zakończeniu rysowania grafiki, grafika nie jest już uwzględniana przez przeglądarkę. Jeśli zmieni się jego pozycja, cała scena musi być ponownie narysowana, w tym wszystkie obiekty, które mogą być pokryte przez grafikę.

Porównanie canvas i SVG

Poniżej znajduje się lista niektórych różnic między canvas a SVG.

Canvas

  • Zależne od rozdzielczości
  • Nieobsługiwane处理器
  • Słaba zdolność renderowania tekstu
  • Możliwość zapisu wynikowych obrazów w formatach .png lub .jpg
  • Najbardziej odpowiednie do gier graficznych o dużej gęstości obrazów, w których wiele obiektów jest często przerysowywanych

SVG

  • Niezależne od rozdzielczości
  • Wsparcie dla处理器
  • Najbardziej odpowiednie do aplikacji z dużymi obszarami renderowania, takich jak Google Maps
  • Wysoki poziom złożoności może spowolnić prędkość renderowania (wszystkie aplikacje nadużywające DOM będą wolne)
  • Nieodpowiednie do aplikacji gier