HTML5 SVG 2D Introdução 13 - Canvas de duelo SVG, vantagens e análise de cenário aplicável

Até agora, as principais características do SVG e da tela foram resumidas. São todas as tecnologias de exibição de gráficos 2D suportadas no HTML5 e todas suportam gráficos vetoriais. Agora, vamos comparar essas duas tecnologias e analisar seus pontos fortes e cenários aplicáveis.

Primeiro, vamos analisar os recursos proeminentes das duas tecnologias e olhar para a tabela abaixo:

A partir da comparação acima, podemos ver que a tela tem uma forte vantagem na operação de pixel; Embora a maior vantagem do SVG seja sua conveniente interatividade e operabilidade. O uso da tela é bastante afetado pelo tamanho da tela (na verdade o número de pixels) e o uso do SVG é relativamente afetado pelo número de objetos (número de elementos). Canvas e SVG ainda são diferentes em termos de métodos de modificação. Depois de desenhar um objeto de tela, ele não pode ser modificado usando scripts e css. Os objetos SVG fazem parte do modelo de objeto de documento, para que possam ser modificados a qualquer momento usando scripts e CSS.

De fato, o Canvas é um sistema gráfico de padrões em tempo real baseado em pixels. Depois de desenhar o objeto, o objeto não é salvo na memória. Quando esse objeto é necessário novamente, ele precisa ser re-desenhado; O SVG é um sistema gráfico de padrões retido baseado em forma. Depois de desenhar o objeto, ele será salvo na memória. Quando precisa modificar as informações desse objeto, ele pode ser modificado diretamente. Essa diferença fundamental levou a diferenças em muitos cenários de aplicação.

Também podemos entender isso nas seguintes aplicações comuns.

Esse aspecto é fácil de entender. Para procurar documentos, não distorcidos ao escalar, ou precisar imprimir documentos de alta qualidade, o SVG é geralmente preferido, como serviços de mapa.

O SVG é frequentemente usado para imagens simples, seja uma imagem em um aplicativo ou em uma página da web, uma imagem grande ou uma imagem pequena. Como o SVG é carregado no DOM, ou pelo menos analisado antes de criar uma imagem, o desempenho cairá um pouco, mas essa perda de eficiência é extremamente pequena em comparação com o custo de renderizar uma página da Web (cerca de alguns milissegundos).

Em termos de tamanho do arquivo (com a finalidade de avaliar o tráfego de rede), a imagem SVG e o tamanho da imagem PNG não são muito diferentes. Mas como o SVG é escalável como formato de imagem, o uso do SVG é uma escolha muito boa se os desenvolvedores desejarem usar a imagem em uma escala maior ou se os usuários usarem telas com DPI alto.

Ao usar o Canvas, você pode obter velocidade de desenho rápida sem manter as informações correspondentes do elemento. Especialmente quando as operações de pixel precisam ser processadas, o desempenho é melhor. A tecnologia de tela é basicamente usada para esse tipo de aplicativo.

A tela é ideal para a visualização de dados em tempo real não interativa. Por exemplo, dados climáticos em tempo real.

Você pode usar o SVG ou a tela para desenhar gráficos e gráficos relacionados, mas se você deseja enfatizar a operabilidade, o SVG é sem dúvida a melhor opção. Se você não precisar de interatividade e enfatizar o desempenho, a tela é mais adequada.

Como a maioria dos jogos é desenvolvida usando APIs de baixo nível, a tela é mais fácil de aceitar. Mas, de fato, ao desenhar a cena do jogo, a tela precisa desenhar e posicionar repetidamente a forma, enquanto o SVG é mantido na memória, e modificar os atributos relacionados é muito fácil, então o SVG também é uma boa escolha.

Há pouca diferença no desempenho entre Canvas e SVG ao criar jogos com vários objetos em uma placa de mini-jogo. No entanto, à medida que mais objetos são criados, o código da tela aumentará muito maior. Como o objeto de tela deve ser re-desenhado toda vez que o loop do jogo é realizado, o jogo de tela diminui.

Devido à sua boa interatividade, o SVG é sem dúvida melhor. Com o monitor gráfico do modo retido do SVG, você pode criar todos os detalhes da interface do usuário em tags do tipo HTML no corpo. Como cada elemento SVG e elemento filho podem responder a eventos separados, você pode criar interfaces de usuário complexas com muita facilidade. O Canvas exige que você especifique como criar cada parte da interface do usuário em uma ordem de código mais complexa. A ordem que você precisa seguir é:

• Obtenha o contexto.

• Comece a desenhar.

• Especifique a cor de cada linha e cada preenchimento.

• Defina a forma.

• Desenho completo.

Além disso, a tela só pode lidar com eventos em toda a tela. Se houver uma interface de usuário mais complexa, você deverá determinar as coordenadas do local em que clicará na tela. O SVG pode lidar com eventos para cada elemento filho individualmente.

Os dois exemplos a seguir ilustram as respectivas vantagens técnicas da tela e SVG:

As renderizações são as seguintes:

Depois de abrir a página, você pode visualizar o código -fonte da página.

Este aplicativo deve ler e escrever pixels de dois vídeos em outro vídeo, e o código usa dois vídeos, duas telas e uma tela final. Capture um quadro no vídeo de cada vez e extraia duas telas separadas, permitindo que os dados sejam lidos de volta:

ctxSource1.Drawimage (Video1, 0, 0, Videowidth, VideoHeight);

ctxSource2.Drawimage (Video2, 0, 0, Videowidth, VideoHeight);

Portanto, o próximo passo é recuperar os dados de cada imagem desenhada para que cada pixel individual possa ser verificado:

currentFamesource1 = ctxSource1.getImagedata (0, 0, videowidth, videoHeight);

currentFamesource2 = ctxsource2.getImagedata (0, 0, videowidth, videoHeight);

Após a obtenção, o código navegará na matriz de pixels da tela verde e pesquisará os pixels verdes. Se encontrado, o código substituirá todos os pixels verdes por pixels na cena de segundo plano. :

for (var i = 0; i <n; i ++)

{

// Pegue o RBG para cada pixel:

r = currentFramesource1.data [i * 4 + 0];

g = currentFramesource1.data [i * 4 + 1];

b = currentFramesource1.data [i * 4 + 2];

// Se isso parece um pixel verde, substitua -o:

if ((r> = 0 && r <= 59) && (g> = 74 && g <= 144) && (b> = 0 && b <= 56)) // Green alvo é (24, 109, 21), então olhe em torno desses valores.

{

pixelindex = i * 4;

currentFramesource1.data [pixelindex] = currentFramesource2.data [pixelindex];

currentFramesource1.data [pixelindex + 1] = currentFramesource2.data [pixelindex + 1];

currentFramesource1.data [pixelindex + 2] = currentFramesource2.data [pixelindex + 2];

currentFramesource1.data [pixelindex + 3] = currentFramesource2.data [pixelindex + 3];

}

}

Finalmente, a matriz Pixel é escrita na tela de destino:

ctxdest.putImagedata (currentFamesource1, 0, 0);

<! Doctype html>

<html>

<head>

<script type = "text/javascript">

// Esta função é chamada quando o círculo é clicado.

função clickme () {

// exibe o alerta.

alerta ("Você clicou no elemento SVG UI.");

}

</script>

</head>

<Body>

<H1>

Interface do usuário SVG

</h1>

<!- ​​Crie o painel SVG. ->

<Svg>

<!- ​​Crie o círculo. ->

<círculo cx = "100" cy = "100" r = "50" preench = "ouro" id = "uielement" onclick = "clickme ();"

/>

</svg>

<p>

Clique no elemento de interface do usuário circular de ouro.

</p>

</body>

</html>

Embora este exemplo seja simples, ele possui todas as características da interface do usuário. A partir deste exemplo, mais uma vez apreciamos a conveniente natureza interativa do SVG.

Por fim, use uma imagem para resumir as tecnologias adequadas para cada aplicativo. Cada bloco na figura representa um tipo de aplicação. Quanto mais próximo é de um certo fim, mais vantagens precisam usar esta tecnologia:

Índice de script: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Centro de Desenvolvimento: https://developer.mozilla.org/en/svg

Referência popular: http://www.chinasvg.com/

Documento oficial: http://www.w3.org/tr/svg11/