Comentário: Canvas e SVG podem permitir que você desenhe figuras no navegador, mas seus princípios básicos são diferentes. Em seguida, apresentaremos os princípios de desenho de tela e SVG. Amigos interessados podem aprender sobre isso.
Canvas e SVG permitem desenhar figuras no navegador, mas seus princípios básicos são diferentes.Svg
O SVG é um idioma que descreve gráficos bidimensionais no XML.
O SVG é baseado em XML, o que significa que todo elemento está disponível no SVG DOM. Você pode adicionar um manipulador de eventos JS a cada elemento.
No SVG, cada gráfico é gravado como um objeto. Se as propriedades de um objeto SVG forem alteradas, o navegador poderá regenerar automaticamente os gráficos.
Tela
A Canvas é capaz de desenhar gráficos 2D em mosca (usando JS)
A tela pode ser regenerada por pixels.
Na tela, depois que os gráficos forem concluídos, eles são esquecidos pelo navegador. Se a posição gráfica for alterada, a tela inteira precisará ser repintada, incluindo os objetos cobertos pelos gráficos.
Comparação entre tela e SVG
A tabela a seguir mostra as principais diferenças entre tela e SVG:
Canvas SVG
Dependente da resolução, independente da resolução
Manipulador de eventos não é suportado
Os recursos fracos de renderização de texto são mais adequados para aplicações com grandes áreas de renderização (Google Maps)
Você pode salvar a imagem final como imagens complexas PNG ou JPG, e a repintura desacelerará (qualquer situação em que o DOM é usado será desacelerado)
Os melhores jogos gráficos adequados para muitos objetos que são frequentemente redesenhados não são adequados para aplicativos de jogo