HTML5 SVG 2D Introducción 13 - lienzo de duelo SVG, ventajas y análisis de escenarios aplicables

Hasta ahora, se han resumido las principales características de SVG y lienzo. Todas son tecnologías de visualización de gráficos 2D compatibles en HTML5, y todos admiten gráficos de vectores. Ahora, comparemos estas dos tecnologías y analicemos sus fortalezas y escenarios aplicables.

Primero, analicemos las características destacadas de las dos tecnologías y veamos la tabla a continuación:

A partir de la comparación anterior, podemos ver que el lienzo tiene una fuerte ventaja en la operación de píxeles; Si bien la mayor ventaja de SVG es su conveniente interactividad y operabilidad. El uso de lienzo se ve muy afectado por el tamaño del lienzo (en realidad el número de píxeles), y el uso de SVG se ve afectado relativamente en gran medida por el número de objetos (número de elementos). El lienzo y el SVG siguen siendo diferentes en términos de métodos de modificación. Después de dibujar un objeto de lienzo, no se puede modificar usando scripts y CSS. Los objetos SVG son parte del modelo de objeto de documento, por lo que pueden modificarse en cualquier momento utilizando scripts y CSS.

De hecho, Canvas es un sistema de gráficos de patrones en tiempo real basado en píxeles. Después de dibujar el objeto, el objeto no se guarda en la memoria. Cuando este objeto es necesario nuevamente, debe volver a dibujar; SVG es un sistema de gráficos de patrones retenidos basados ​​en forma. Después de dibujar el objeto, se guardará en la memoria. Cuando necesita modificar la información de este objeto, se puede modificar directamente. Esta diferencia fundamental ha llevado a diferencias en muchos escenarios de aplicación.

También podemos entender esto en las siguientes aplicaciones comunes.

Este aspecto es fácil de entender. Para explorar documentos, no distorsionados al escalar o necesitar imprimir documentos de alta calidad, generalmente se prefiere SVG, como los servicios de mapas.

SVG a menudo se usa para imágenes simples, ya sea una imagen en una aplicación o una página web, una imagen grande o una imagen pequeña. Dado que SVG se carga en el DOM, o al menos se analiza antes de crear una imagen, el rendimiento disminuirá ligeramente, pero esta pérdida de eficiencia es extremadamente pequeña en comparación con el costo de representar una página web (aproximadamente unos pocos milisegundos).

En términos de tamaño del archivo (con el fin de evaluar el tráfico de red), la imagen SVG y el tamaño de la imagen PNG no son muy diferentes. Pero debido a que SVG es escalable como formato de imagen, usar SVG es una buena opción si los desarrolladores desean usar la imagen a mayor escala, o si los usuarios usan pantallas con alto DPI.

Al usar lienzo, puede obtener una velocidad de dibujo rápida sin retener la información correspondiente del elemento. Especialmente cuando las operaciones de píxeles deben procesarse, el rendimiento es mejor. La tecnología de lienzo se usa básicamente para este tipo de aplicación.

El lienzo es ideal para la visualización no interactiva de datos en tiempo real. Por ejemplo, datos meteorológicos en tiempo real.

Puede usar SVG o lienzo para dibujar gráficos y gráficos relacionados, pero si desea enfatizar la operabilidad, SVG es sin duda la mejor opción. Si no necesita interactividad y enfatiza el rendimiento, el lienzo es más adecuado.

Debido a que la mayoría de los juegos se desarrollan utilizando API de bajo nivel, el lienzo es más fácil de aceptar. Pero de hecho, al dibujar la escena del juego, el lienzo necesita dibujar y colocar repetidamente la forma, mientras que SVG se mantiene en la memoria, y modificar los atributos relacionados es muy fácil, por lo que SVG también es una buena opción.

Hay poca diferencia en el rendimiento entre Canvas y SVG al crear juegos con varios objetos en un tablero de mini-juego. Sin embargo, a medida que se crean más objetos, el código de lienzo crecerá mucho más. Dado que el objeto de lienzo debe volver a dibujar cada vez que se realiza el bucle del juego, el juego de lienzo se ralentiza.

Debido a su buena interactividad, SVG es indudablemente mejor. Con la pantalla gráfica de modo retenido de SVG, puede crear todos los detalles de la interfaz de usuario en etiquetas tipo HTML en el cuerpo. Debido a que cada elemento SVG y elemento infantil pueden responder a eventos separados, puede crear interfaces de usuario complejas muy fácilmente. Canvas requiere que especifique cómo crear cada parte de la interfaz de usuario en un orden de código más complejo. El orden que debe seguir es:

• Obtener el contexto.

• Empiece a dibujar.

• Especifique el color de cada línea y cada relleno.

• Defina la forma.

• Dibujo completo.

Además, el lienzo solo puede manejar eventos en todo el lienzo. Si hay una interfaz de usuario más compleja, debe determinar las coordenadas de la ubicación en la que hace clic en el lienzo. SVG puede manejar eventos para cada elemento infantil individualmente.

Los siguientes dos ejemplos ilustran las respectivas ventajas técnicas de Canvas y SVG:

Las representaciones son las siguientes:

Después de abrir la página, puede ver el código fuente de la página.

Esta aplicación es para leer y escribir píxeles de dos videos en otro video, y el código usa dos videos, dos lienzos y un lienzo final. Capture un cuadro en el video a la vez y dibuje en dos lienzos separados, lo que permite que los datos se vuelvan a leer:

CTXSource1.DrawImage (Video1, 0, 0, VideOWIdth, VideoHeight);

ctxSource2.DrawImage (video2, 0, 0, videowidth, videoHeight);

Entonces, el siguiente paso es recuperar los datos para cada imagen dibujada para que se pueda verificar cada píxel individual:

Currentframesource1 = ctxSource1.getImageData (0, 0, videowidth, videoHeight);

Currentframesource2 = ctxSource2.getImageData (0, 0, VideoWidth, VideoHeight);

Después de obtener, el código explorará la matriz de píxeles de la pantalla verde y buscará los píxeles verdes. Si se encuentra, el código reemplazará todos los píxeles verdes con los píxeles en la escena de fondo. :

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

{

// Tome el RBG para cada píxel:

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

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

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

// Si esto parece un píxel verde, reemplácelo:

if ((r> = 0 && r <= 59) && (g> = 74 && g <= 144) && (b> = 0 && b <= 56)) // Target Green IS (24, 109, 21), así que mira esos 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, la matriz de píxeles se escribe en el lienzo de destino:

ctxdest.putimagedata (Currentframesource1, 0, 0);

<! Doctype html>

<html>

<Evista>

<script type = "text/javaScript">

// Esta función se llama cuando se hace clic en el círculo.

función clickMe () {

// Muestra la alerta.

alerta ("Hiciste clic en el elemento SVG UI");

}

</script>

</ablo>

<Body>

<h1>

Interfaz de usuario de SVG

</h1>

<!- ​​Crea el panel SVG. ->

<svg>

<!- ​​Crea el círculo. ->

<círculo cx = "100" cy = "100" r = "50" relleno = "oro" id = "uielement" onClick = "clickMe ();"

/>

</svg>

<p>

Haga clic en el elemento de interfaz de usuario circular dorado.

</p>

</body>

</html>

Aunque este ejemplo es simple, tiene todas las características de la interfaz de usuario. A partir de este ejemplo, una vez más apreciamos la conveniente naturaleza interactiva de SVG.

Finalmente, use una imagen para resumir las tecnologías adecuadas para cada aplicación. Cada bloque de la figura representa un tipo de aplicación. Cuanto más se acerca a cierto punto, más ventajas tiene para usar esta tecnología:

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

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

Referencia popular: http://www.chinasvg.com/

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