HTML 5 Canvas vs. SVG
- Poprzednia strona HTML5 SVG
- Następna strona Media HTML
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
- Poprzednia strona HTML5 SVG
- Następna strona Media HTML