SVG frente a Canvas: cómo elegir

En este tema, que comienza en un nivel alto, se proporciona una comparación entre SVG y Canvas y después se describen varias muestras de código comparativas, como trazado de rayos y pantalla verde.

Nota  Para ver muchos de los ejemplos de este tema, debes usar un explorador como Windows Internet Explorer 9, que admita los elementos SVG y Canvas.

Introducción

HTML evoluciona para proporcionar mejores y más ricos gráficos estándares para ayudar a mejorar las experiencias de los usuarios. crea una oportunidad para que los desarrolladores web usen tecnologías web basadas en estándares para crear aplicaciones y sitios interactivos ricos en gráficos sin tener que usar tecnologías especializadas ni escribir código específico del explorador. En la siguiente sección, se presenta el concepto de gráficos vectoriales y:

  • Se distinguen las diferencias entre el modo inmediato y el modo retenido
  • Se presenta el elemento HTML5 Canvas que se usa para los gráficos del modo inmediato y se proporciona información general sobre Canvas
  • Se presenta el formato SVG (Scalable Vector Graphics), un conjunto de elementos de HTML5 usado para los gráficos del modo retenido, y se proporciona información general sobre SVG
  • Se instruye a los desarrolladores nuevos y experimentados a usar uno o el otro modelo de gráficos vectoriales (o ambos, según cuál sea el escenario) para los gráficos vectoriales y HTML5.

Gráficos vectoriales

El concepto de gráficos vectoriales no es nuevo. Son formas geométricas básicas (formas, puntos, líneas y polígonos) que se basan en los vectores para representar imágenes. A finales de la década de 1960, se agregó un lenguaje de gráficos vectoriales (gráficos de tortuga) al lenguaje de programación Logo para proporcionar soporte a un robot tortuga que fue diseñado para llevar a cabo funciones de dibujo. Si bien el mundo de los gráficos ha evolucionado significativamente en términos de complejidad, existen los mismos conceptos básicos.

La complejidad de los gráficos vectoriales va de simple a moderada y a extremadamente compleja. A continuación, se muestran algunos ejemplos básicos.

  • Simple: leyenda en un documento o ilustración.
  • Moderada: ilustraciones como cuadros, diagramas y mapas.
  • Compleja: documentos como los que se usan para ingeniería.

Si bien la naturaleza de los ejemplos anteriores es estática, los gráficos vectoriales también admiten interactividad, una característica clave que expande los escenarios significativamente. Los gráficos vectoriales proporcionan formatos interactivos y estáticos para aplicaciones en la web, en el escritorio y en dispositivos.

Información general de alto nivel de escenarios de gráficos vectoriales

Actualmente en la web

  • El uso de gráficos vectoriales como imágenes de fondo en páginas web para admitir características de alejamiento y PPP alto.
  • Asignación de propiedades, como mapas de Bing, para realizar búsqueda de ruta.
  • Sitios de cotizaciones interactivos que muestran cuadros y gráficos en tiempo real.
  • Elección y otros mapas.
  • Planos de sala para líneas aéreas o salas de conciertos.
  • Juegos.

En la oficina

  • Herramientas de productividad, como Microsoft Office Word (para imágenes prediseñadas), PowerPoint y Excel y formas para Visio.
  • Herramientas CAD que imprimen formatos gráficos vectoriales.
  • Herramientas para empresas, como aplicaciones de Oracle y Microsoft Dynamics, que contienen cuadros y gráficos interactivos.

En dispositivos

  • Porcentajes enriquecidos de interfaces de usuario gráficas.
  • Iconos y widgets interactivos del usuario.
  • Todas las experiencias del usuario de PDA.

Diseñadores profesionales y uso de herramientas

Los diseñadores web profesionales ven los gráficos vectoriales en conjuntos de herramientas como los siguientes:

  • Adobe Illustrator, usado para crear imágenes estáticas de alta calidad, que pueden exportarse a SVG
  • Adobe Flash Professional, que puede exportarse a un idioma de vector basado en XML
  • Microsoft Expression Blend para Windows Presentation Foundation (WPF) y Silverlight

Es importante tener en cuenta que los gráficos vectoriales existen en el escritorio, en dispositivos y en la web desde hace bastante tiempo.

Tecnologías gráficas de HTML5

Con HTML5, el desarrollador o diseñador ahora puede crear la experiencia anterior con tecnología basada en estándares. Esto mejora, en gran medida, la experiencia del usuario, ya que elimina la instalación de complementos, que se asocia con el 50% de las causas de abandono de los sitios. Actualmente, el explorador proporciona los gráficos en forma nativa y, en el caso de Internet Explorer 9, aprovecha el poder de Microsoft Windows y gráficos acelerados por hardware.

En la siguiente sección, se proporciona información general sobre las dos tecnologías (nuevas pero diferentes), cómo usarlas y los beneficios y las limitaciones individuales de cada una. Se usa un espectro de escenarios de gráficos vectoriales a fin de analizar los métodos para seleccionar la mejor tecnología para cada escenario.

En la siguiente figura, se muestra un espectro de escenarios general que existe en los gráficos vectoriales. Cada escenario individual puede estar más cerca de canvas o svg, lo que significa que una tecnología es mejor que la otra para ese escenario. Si un escenario queda en el medio del espectro, cualquiera de las dos tecnologías es una opción viable.

Espectro de escenarios de gráficos vectoriales

Es posible dibujar prácticamente cualquier gráfico vectorial con estas tecnologías, pero, según la tarea, el desarrollador o el equipo deberán trabajar mucho más. Observaremos este espectro más en detalle cuando revisemos los casos de uso de cada tecnología y después los apliquemos a escenarios comunes.

Presentación de las tecnologías

En la siguiente sección, se presentan las tecnologías para crear gráficos vectoriales en HTML5 a fin de analizar los escenarios que se presentaron anteriormente.

Uso de las muestras

Para los siguientes ejemplos, usa la siguiente muestra de código como plantilla. Puedes usar esta plantilla para desarrollar SVG dentro de HTML. Esta plantilla se usa en cada muestra de este tema. Debido al formato, puedes usar scripts y estilos. La plantilla también incluye una etiqueta meta, que permite el desarrollo de SVG en un archivo local compartido de forma más fácil. Los ejemplos usan el siguiente formato. Primero, se proporciona el código significativo y después un vínculo para el código completo.


<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <style type="text/css" media="screen">
    </style>
    <script type="text/javascript">
    </script>
  </head>
  <body>
  </body>
</html>


http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/template.htm (Haz clic en Ver código fuente para ver este marcado).

SVG

SVG se usa para describir Scalable Vector Graphics, un modelo de gráficos de modo retenido que persiste en un modelo con memoria que se puede manipular mediante los resultados de códigos en el reprocesamiento. Esto es diferente del modo inmediato, que se analizará más adelante. Ambos se proporcionan en HTML5.

SVG es un modelo de modo retenido, y se presentó en 1999 como respuesta a dos propuestas de proveedores independientes (Microsoft y Adobe). Se formó el grupo de trabajo de W3C SVG y, en 2001, la Especificación SVG alcanzó un “Estado recomendado”. Ahora trabajamos a partir de SVG 1.1 segunda edición, la que, al momento de la redacción de este documento, se encuentra en la etapa de "última llamada".

Si bien SVG puede proporcionarse como un archivo autónomo, el foco inicial se encuentra en su integración natural con HTML.

Como HTML, SVG está integrado en el documento con elementos, atributos y estilos. Cuando el elemento <svg> se introduce por primera vez en el documento, se comporta de manera similar a un <div> y es parte de HTMLDocument, pero incluye SVGDocument de interfaz adicional (SVGDocument proporciona una interacción más profunda y enriquecida con los gráficos vectoriales).

Los elementos

Si bien el contenedor externo <svg> se integra al modelo de cuadros HTML, el modelo interno se aparta de eso en la mayoría de los casos, ya que los vectores no están restringidos a cuadros simples. Para proporcionar gráficos enriquecidos, esta desviación requiere la expansión de atributos en SVG.

Por ejemplo:


<svg height="1000px" width="1000px">	
  <rect id="myRect" height="100px" width="100px" fill="blue"/>
</svg>


http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/bluerect.htm

Nota  Para representar esto y muchos de los siguientes ejemplos, debes usar un explorador (como Internet Explorer 9) que admita los elementos SVG y Canvas.

El código HTML anterior crea un cuadrado: 100 píxeles de largo y de ancho, relleno con un fondo azul.

Cuadrado azul de SVG

Este elemento, el <rect>, se mantiene en Document Object Model (DOM) del documento HTML. Como otros elementos HTML, SVG puede tener varios estilos diferentes. El siguiente ejemplo es una tabla.

Estilos

Es posible que los desarrolladores observen que los atributos les resultan familiares. SVG cuenta tanto con atributos como con atributos de presentación. En este punto, parece una delineación un tanto arbitraria, pero lo importante es que es posible asignar un estilo a los atributos de presentación según las reglas de estilo de CSS.

Los cuatro rectángulos se rellenan con varios métodos diferentes.


<!--No fill (defaults the color to #000000)-->
<rect id="myRect1" height="100%" width="100%" >

<!--using the class="greenrect"-->
<rect id="myRect2" height="100%" width="100%" class="greenrect"/>

<!--using the style="fill:pink"-->	
<rect id="myRect3" height="100%" width="100%" style="fill:pink"/> 

<!--using the attribute fill="red"-->	
<rect id="myRect4" height="100%" width="100%" fill="red"/>

Cuatro cuadrados SVG con color

En el primer ejemplo, se demuestra que excluir un atributo tiene un efecto visible en el gráfico. En este caso, el color cambia a negro de manera predeterminada.

En el segundo ejemplo, se demuestra el uso de class="greenrect" para rellenar el rectángulo. Las CSS para rellenar esto se incluyen como:


rect.greenrect {fill:green;}

En el tercer ejemplo, se usa un estilo en línea para definir que el relleno sea rosa. En el último ejemplo, se usa el atributo para rellenar con rojo. En este ejemplo, también se demuestra el uso de los selectores CSS. El estilo también incluye:


rect:hover {fill:yellow;}

Esto establece una regla para que todos los rectángulos cambien su color a amarillo cuando se desplace el mouse sobre ellos.

Nada de esto debería ser nuevo para los desarrolladores web experimentados. Estos ejemplos se proporcionan para enfatizar las similitudes (con estilos, hojas de estilos, clases y selectores) y las diferencias (los estilos no se aplican a todos los atributos, solo a los atributos de presentación, las propiedades nuevas o las propiedades incongruentes).

http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/svgstyling.htm

Programación

Las API de atributo y otras manipulaciones del DOM aún se aplican y cumplen con las reglas actuales de los atributos. La excepción es que la aplicación a la presentación está basada en el atributo sustituido por estilos, si corresponde.

Si estos atributos se establecen mediante el atributo principal o sus respectivos métodos de DOM, llevan a cabo su presentación, y, en consecuencia, los cambios de DOM subyacentes (tenga en cuenta la sintaxis diferente para establecer la altura usando el SVG DOM):


document.getElementById("myDiv").style.height = "200px";
// alternatively
//document.getElementById("myDiv").style="height;200px";

document.getElementById("myRect").height.baseVal.value = 200;
// alternatively
//document.getElementById("myRect").setAttribute("height","200px");

Interactividad

Otro factor diferencial importante de SVG es la capacidad para codificar la interacción sin complejidad. Así como SVG tiene un DOM programable como HTML, también tiene un modelo de eventos. Observa el siguiente gráfico, que es más complejo que un rectángulo o un cuadrado: la ruta.

Una ruta se usa para realizar formas arbitrarias como, en este caso, dos formas que representan los estados de Alaska y Hawái en los Estados Unidos:

Estados de Alaska y Hawái

http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/svginteractivity.htm

El evento se genera creando la alerta que se especificó previamente. Estas formas complejas, como el rectángulo más simple, también responden a los selectores CSS. Se puede proporcionar un simple mecanismo de resaltado con una línea de CSS:


path:hover {fill:yellow;} 


Canvas

Otro enfoque para proporcionar una experiencia gráfica más rica para los usuarios, proporcionada por la etiqueta <canvas>, introducida en HTML5 por Apple para Safari y otros widgets gráficos. Expone una experiencia más programática para dibujar gráficos de modo inmediato, incluidos el rectángulo, la ruta y las imágenes, similar a SVG. La representación de gráficos de modo inmediato es un modelo “fire and forget” (dispara y olvídate) que muestra gráficos directamente en la pantalla y que, posteriormente, no tiene contexto de lo que se hizo. A diferencia del modo retenido, no se guardan los gráficos representados; un desarrollador debe reinvocar todos los comandos de dibujo que se necesitan para describir la escena completa cada vez que se requiere un nuevo marco, independientemente de los cambios reales (por el contrario, SVG es conocido por tener un “gráfico de escenas”).

El elemento

Para usar las funcionalidades de canvas, el desarrollador web simplemente introduce un elemento canvas:


<canvas id="myCanvas" width="1200px" height="1200px"></canvas>

Y, a continuación, usa las API <canvas> que tienen bibliotecas de bajo nivel y dos dimensiones tradicionales para dibujar imágenes o vectores.

La manipulación de los gráficos en canvas se realiza con el código JavaScript, que tiene el beneficio de ser conocido por los desarrolladores web al incorporar compatibilidad con los gráficos.


var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

Como se mencionó anteriormente, existen formas y objetos similares que se encuentran en SVG y, por ejemplo, un desarrollador puede dibujar un rectángulo con el siguiente código:


ctx.fillStyle = "rgb(0,0,255)";
ctx.fillRect(10, 10, 100, 100);

Las ventajas y las desventajas de estos enfoques y los escenarios apropiados se analizan más adelante.

El resultado final es el mismo que en SVG. http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/canvasintro.htm

Cuadrado azul de Canvas

Pero de la misma manera que con SVG, canvas tiene formas geométricas básicas más complejas, con la diferencia de que tienen forma de funciones.

Programación de eventos

Para dibujar gráficos más complejos que un rectángulo, como el que aparece en el mapa de Hawái que se muestra anteriormente, la API de canvas proporciona una API de ruta que admite comandos similares al del elemento <path> en SVG, salvo que invoques las API para cada segmento de líneas en lugar de enunciarlas en un solo atributo:


ctx.beginPath();
ctx.moveTo(233.08751,519.30948);
ctx.lineTo(235.02744,515.75293);
ctx.lineTo(237.29070000000002,515.42961);
ctx.lineTo(237.61402,516.23791);
ctx.lineTo(235.51242000000002,519.30948);
ctx.lineTo(233.08751,519.30948);
ctx.closePath();

Para ver el mapa de Hawái, consulta http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/canvasmap.htm.

La API de ruta no se limita a moveTo y arc, e incluye los mismos aspectos direccionales de SVG incluidas las curvas cuadráticas y de Bézier.

Cuando el mouse se encuentra sobre la imagen, hay eventos y funciones limitadas para capturar. Dado que no hay conocimiento retenido del gráfico, el programador debe traducir una coordenada mouseX, mouseY en el elemento único de la etiqueta <canvas> y después redirigir ese comando a una forma que se encuentre en una estructura con memoria. Las bibliotecas de terceros existen para que las rutas más complejas admitan esto, incluida una API integrada isPointInPath, pero la última se limita a la última ruta dibujada. De esta forma, a diferencia de SVG, no existe ningún estilo ni compatibilidad para detectar coincidencias en varias geometrías. Y, dado que canvas no admite escalabilidad, el mapa de Hawái pierde fidelidad rápidamente cuando se usa el zoom:

El mapa de Hawái muestra pérdida de fidelidad cuando se lo aleja

Canvas es una poderosa API de bajo nivel que permite que los desarrolladores proporcionen experiencias gráficas nuevas.

Resumen de alto nivel de Canvas en comparación con SVG

A continuación, se muestra un resumen de alto nivel para ayudarte a determinar cuándo usar Canvas en lugar de SVG, o SVG en lugar de Canvas, para crear gráficos vectoriales.

CanvasSVG
Basado en píxeles (.png dinámico)Basado en forma
Elemento HTML únicoMúltiples elementos gráficos, que forman parte de DOM
Modificado mediante script solamenteModificado mediante script y CSS
La interacción de usuario/modelo de eventos es pormenorizada (x,y)La interacción de usuario/modelo de eventos es resumida (rect, ruta)
El rendimiento es mejor con una superficie menor, un número más grande de objetos (>10 k) o ambosEl rendimiento es mejor con un número menor de objetos (<10 k), una superficie más grande o ambos

 

En la tabla anterior, piense en un modelo mental de los dos en términos del software existente. Canvas se parece a MSPaint, donde puede dibujar y crear imágenes mediante el uso de formas y otras herramientas. SVG se parece a una diapositiva de Office PowerPoint que tiene compatibilidad programable y la capacidad para agregar un tema.

Cuándo usar <canvas> y cuándo usar SVG: los escenarios

En esta sección, se describen los beneficios y las limitaciones técnicas de ambas tecnologías, incluido un enfoque de sentido común para determinar cuándo una es más apropiada que la otra. Se debe observar que tanto SVG como <canvas> pueden lograr resultados casi idénticos, una funcionalidad duplicada completa. Es importante describir los escenarios específicos en los que <canvas> es significativamente mejor que SVG o viceversa, en los que es más apropiado usar una combinación de ambos o en los que se puede usar y considerar cualquiera de los dos opciones.

Espectro de escenarios de gráficos vectoriales

Estos escenarios clarifican cuáles funcionan bien con SVG, cuáles funcionan bien con Canvas y cuáles están en el medio. Describen los beneficios y las desventajas de cada uno para que los desarrolladores puedan comprender los comportamientos de la tecnología y realizar elecciones sólidas para sus aplicaciones.

No destinado a principiantes

A veces, existen influencias externas que requieren una elección de tecnología que es, en su mayoría, independiente de la funcionalidad. Para aclarar la pregunta de si se debe usar Canvas o SVG, existen dos diferenciaciones principales.

A veces, el conocimiento, el conjunto de habilidades y los recursos existentes del desarrollador juegan un papel importante en la elección de tecnologías. Si un desarrollador tiene un amplio conocimiento de API de gráficos de bajo nivel y un conocimiento limitado de las tecnologías web, es posible que la tecnología que elija sea canvas.

Asimismo, el rendimiento es de gran importancia en sitios web con mucho tráfico. Es necesario comparar las características de rendimiento de las dos tecnologías. Esto puede requerir desarrollo de la accesibilidad, estilos personalizados e interacciones del usuario más granulares que canvas no incluye. Esto no significa que canvas sea la opción lógica, a pesar de que generalmente se lo considera de alto rendimiento. Los siguientes gráficos muestran la diferencia del tiempo de representación entre los objetos de SVG y Canvas.

Rendimiento de Canvas en comparación con el rendimiento de SVG

Generalmente, cuando el tamaño de la pantalla aumenta, Canvas comienza a degradar a medida que es necesario dibujar más píxeles. Cuando la cantidad de objetos en la pantalla aumenta, SVG comienza a degradar a medida que se agregan de manera continua al DOM. Estas mediciones no son necesariamente precisas y, sin dudas, pueden cambiar según la implementación y la plataforma, ya sea si se usan gráficos completamente acelerados por hardware o no, y la velocidad del motor de JavaScript.

Documentos vectoriales complejos de alta fidelidad

Los documentos vectoriales complejos de alta fidelidad han sido, y continuarán siendo, el punto óptimo para SVG por dos razones fundamentales. Existen documentos suficientes que son muy detallados, incluidos los que se producen con programas CAD, para los que la porción scalable de SVG proporciona una vista detallada, como documentos independientes o como los incrustados en una página web. La tecnología también es ideal para las impresiones de alta fidelidad. La naturaleza declarativa de SVG facilita la generación de formas del lado de las herramientas, del cliente o del servidor a partir de bases de datos. Por último, hemos observado una respuesta por parte de los organismos gubernamentales que va desde una compatibilidad recomendada a una compatibilidad requerida de SVG a causa de los planos de ingeniería (para las patentes) o planos industriales (para fines de planeamiento urbano). Se espera que este cambio continúe a medida que las entidades gubernamentales se alejan de la idea de favorecer a un proveedor por encima de otro por documentos electrónicos de uso público, como:

  • Planos de planta, ingeniería y edificios
  • Diagramas esquemáticos, aeronáuticos y eléctricos
  • Organigramas
  • Mapas
  • Diagramas biológicos

En las siguientes ilustraciones, se muestra un ejemplo del detalle que se puede preservar en el escenario anterior. La primera imagen muestra una instantánea de una página web que puede encontrarse en el sitio de la versión de prueba. Contiene un diagrama del sistema respiratorio y de los elementos de la tabla periódica.

http://ie.microsoft.com/testdrive/Graphics/RealWorldDataAndDiagrams/Default.xhtml

Alejamiento de la tabla periódica de los elementos

La segunda imagen muestra los mismos diagramas con un zoom de 1000%

Acercamiento de la tabla periódica de los elementos

Cuando se considera la utilidad que tiene el hecho de poder observar un esquema grande, la necesidad de capacitarse detalladamente, o imprimir un esquema completo para fines de ingeniería, la S en escalabilidad se vuelve muy clara y valiosa. Por estas razones, colocamos los documentos vectoriales complejos de alta fidelidad en el extremo de nuestro espectro, más cerca de SVG, como se muestra en la siguiente imagen.

Los documentos de alta fidelidad aparecen más cerca del extremo del espectro del lado de SVG

Estos documentos también pueden beneficiarse de la interactividad, el segundo aspecto de SVG que convierte a estos escenarios en los más apropiados para un modelo gráfico retenido.

Gráficos web mejorados

SVG como formato de imagen

Otro uso común de SVG es para una imagen simple, ya sea dentro de una aplicación o una página web, grande o pequeña. Debido a que SVG se carga en el DOM, o, al menos, se analiza antes de crear la imagen, el rendimiento se degrada levemente, pero esto es infinitamente menor comparado con el costo que implica representar una página web (aproximadamente unos pocos milisegundos).

En cuanto al tamaño del archivo (con el objetivo de evaluar el tráfico de red), las siguientes dos imágenes son idénticas en presentación, y solo difieren en 1K (SVG es apenas más grande y no está comprimida).

Imagen de dos esferas azules

Como se menciona anteriormente, dado que SVG es escalable como formato de imagen, si el desarrollador desea usar esa imagen en una escala mayor, o si el usuario usa una pantalla con PPP alto, el Gráfico de red portátil (PNG) se pixela o se necesita una versión más grande del archivo para preservar la fidelidad.

Imagen de dos esferas azules

De esta forma, SVG puede servir como un buen formato de reemplazo de imagen hasta para las imágenes más simples de una página web. De esta manera, las imágenes WebApp/WebPage estáticas se ubican en el lado de SVG del espectro.

Las imágenes estáticas aparecen más cerca del extremo del lado SVG del espectro

Manipulación de píxeles

Del otro lado del espectro, el hecho de usar Canvas nos recuerda a dibujar rápido y sin necesidad de retener esta información. Existen varios escenarios de datos en tiempo real que son los más adecuados para <canvas>. El trazado de rayos puede usarse para hidratar una imagen trazando la ruta de luz a través de los píxeles del plano de una imagen y simulando los efectos de sus encuentros con objetos virtuales. La siguiente imagen muestra esta simulación.

Ejemplo de trazado de rayos con Canvas

Requiere de muchos cálculos, ya que la velocidad está relacionada con la del motor de JavaScript en un explorador. Y aún así, mientras la mayoría posiblemente asegure que el código nativo es aún más rápido, a medida que los motores JavaScript maduran, comenzamos a ver cómo se reduce esta brecha, como en la época del ensamblado y C++.

Los efectos logrados por el trazado de rayos, si bien normalmente se realizan en el fondo de la web, tienen un alcance amplio. Varían desde la creación de efectos visuales diferentes, incluida la creación de imágenes realistas de gráficos vectoriales simples, hasta la aplicación de filtros, similares a los que se usan en fotografía para eliminar los ojos rojos.

Dado que la API de Canvas permite que el desarrollador lea y escriba píxeles, los únicos límites aquí son la velocidad y la imaginación. Adam Burmister proporciona el ejemplo anterior, que se encuentra disponible en http://labs.flog.co.nz/raytracer/. En este ejemplo, existe una gran cantidad de bibliotecas para lograr los cálculos necesarios para crear la imagen final, pero la función de finalización principal es un fillRect.


setPixel: function(x, y, color){
  var pxW, pxH;
  pxW = this.options.pixelWidth;
  pxH = this.options.pixelHeight;

  this.canvas.fillStyle = color.toString();
  this.canvas.fillRect (x * pxW, y * pxH, pxW, pxH);
},

Por esta razón, los gráficos de alto rendimiento (por ejemplo, los trazadores de rayos) se ubican en el extremo izquierdo del espectro como un escenario de Canvas, como se muestra en la siguiente imagen.

Los gráficos de alto rendimiento se ubican más cerca de Canvas en el espectro

Ten en cuenta que el autor que produjo el trazador de rayos anterior observó que, debido a que el escenario debe producir una imagen estática, el software de escritorio se ajusta mucho mejor a las operaciones de punto flotante intensivas requeridas por un trazador de rayos.

Una implementación interesante de la manipulación de píxeles metálicos es la aplicación de filtros en las imágenes. Si bien los filtros ya existen en la web y requieren velocidades de procesamiento significativas (que se benefician de su aplicación mediante los gráficos acelerados por hardware de manera más profunda en el conducto de gráficos), los desarrolladores pueden experimentar con algoritmos, como detección de bordes u otras expresiones matemáticas.

Datos en tiempo real

Para escenarios más comunes, canvas es muy adecuado para producir datos en tiempo real. Tenga presente cómo identificarlos de manera sucinta, debido a que ya se mencionó que la interacción del usuario con canvas es difícil. Por lo tanto, a continuación, se analiza la visualización no interactiva de datos en tiempo real.

Actualmente, la presentación de los datos climáticos se realiza de una manera bastante estadística, mediante imágenes que se generan en un servidor en determinados intervalos, o lo más rápido posible con complementos de terceros del lado del cliente. A pesar de que ECWMF ha llevado a cabo un estudio en el que se indica un ahorro al usar SVG en vez de imágenes generadas por un servidor, canvas es un claro ganador para la mayoría de las representaciones gráficas de los patrones climáticos (y otros datos rápidos en tiempo real). La siguiente imagen muestra patrones climáticos que aparecen gráficamente en un mapa.

Se muestran patrones climáticos en un mapa

Como se puede observar en la imagen anterior, no necesariamente se dispone de una superficie grande para dibujar, y la cantidad de objetos que aparecen en la pantalla es bastante alta. Al usar la API de canvas, estas se pueden dibujar rápidamente (y borrar) sin producir un impacto en el DOM. Y, si bien esto se puede realizar con, por ejemplo, elipses de SVG, el costo que implica cargarlas en el DOM y modificarlas mediante la animación, es alto. En realidad, cuando se observa una gran cantidad de formas, especialmente formas diferentes, en imágenes o animación de datos para análisis, esto generalmente indica que canvas es la tecnología que se debe usar. Los verdaderos límites aquí son cuán rápido se pueden visualizar los datos y cómo se pueden regir por la velocidad de la CPU y la velocidad del motor de JavaScript. De todas formas, se debe tener en cuenta que, además del escenario del trazado de rayos intensivo de la CPU, también es posible lograr una animación aceptable. Reasonable describe la animación relativa entre lo que el cliente puede hacer con JavaScript en comparación con lo que el servidor puede calcular y situar a través del cable.

Este escenario parece ser el caso de uso clave para <canvas>.

Las escenas complejas y las animaciones en tiempo real se inclinan hacia Canvas en el espectro

Reemplazo de píxeles (Pantalla verde)

Otro escenario posible para usar Canvas es con la detección de color en un vídeo para reemplazar un color de fondo por otra escena o imagen. Como sucede con los trazadores de rayos o filtros, debido a las limitaciones de velocidad del rendimiento actuales de JavaScript, es posible que cualquier escenario del mundo real que requiera una calidad de producción de excelencia sea preprocesado con software de escritorio. No obstante, dado que <canvas> está diseñado para la lectura y escritura de nivel bajo, los escenarios como el reemplazo de la pantalla verde no pueden realizarse ni siquiera con SVG.

El código necesario para leer y escribir píxeles desde dos vídeos hacia otro vídeo requiere el uso de los dos vídeos, dos Canvas y un Canvas final. El vídeo se toma de un marco por vez y se dibuja en dos Canvas separados. Esto permite releer los datos nuevamente.


ctxSource1.drawImage(video1, 0, 0, videoWidth, videoHeight);
ctxSource2.drawImage(video2, 0, 0, videoWidth, videoHeight);

Y, de esta manera, el próximo paso es recuperar un identificador para cada imagen dibujada de modo que puedas observar cada uno de los píxeles.


currentFrameSource1 = ctxSource1.getImageData(0, 0, videoWidth, videoHeight);
currentFrameSource2 = ctxSource2.getImageData(0, 0, videoWidth, videoHeight);


Una vez que se obtiene, el código recorre la matriz de píxeles de la pantalla verde, busca el verde y, si lo encuentras, el código reemplaza todos los píxeles verdes por el píxel de la escena de fondo.


for (var i = 0; i < n; i++) 
{
  // Grab the RBG for each pixel:
  r = currentFrameSource1.data[i * 4 + 0];
  g = currentFrameSource1.data[i * 4 + 1];
  b = currentFrameSource1.data[i * 4 + 2];
  
  // If this seems like a green pixel replace it:
  if ( (r >= 0 && r <= 59) && (g >= 74 && g <= 144) && (b >= 0 && b <= 56) ) // Target green is (24, 109, 21), so look around those values.
  {
    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 Canvas de destino.


ctxDest.putImageData(currentFrameSource1, 0, 0);

http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/canvasgreenscreen.htm (Para ver el código de la pantalla verde en su totalidad, ve el código de origen de esta página).

Espectro de Canvas en comparación con el espectro de SVG

Combinación/Escenarios cruzados

Los siguientes escenarios pueden realizarse en SVG o en Canvas con resultados aceptables, pero es posible que prefiera una tecnología más que la otra.

Cuadros y gráficos

Existe un amplio espectro de cuadros y gráficos que requieren gráficos vectoriales. La mayoría de estos gráficos podrían crearse mejor con SVG porque tienen una de las tres características:

  • Los gráficos se generan a partir de datos existentes que pueden transponerse con facilidad a XML (SVG)
  • Requieren interacción del usuario
  • Se benefician de la aplicación de estilo en una página web

Incrementamos los escenarios de documentos de alta fidelidad con funcionalidad interactiva que mejora significativamente el alcance de los escenarios. Estos incluyen:

  • Diagramas de flujo y organigramas interactivos
  • Gráficos de datos (anillos, barras, dispersión)
  • Búsqueda de ruta - mapas interactivos
  • Mapas de planta, ingeniería, edificios
  • Planos de sala para líneas aéreas o salas de concierto

Se ha confirmado que el procesamiento de datos en tiempo real rápido se ajusta mejor a canvas, principalmente por la velocidad.

Juegos bidimensionales

Los juegos casuales, que aquí se definen como juegos bidimensionales simples para web, dependen de la elección del desarrollador (es decir, entre canvas y svg). Debido a que históricamente las bibliotecas de juegos han aprovechado las API de gráficos de más bajo nivel, la tendencia será inclinarse hacia <canvas>.

Mientras que otros componentes de la biblioteca son significativamente más profundos que la capa de gráficos, como los famosos motores de física, los gráficos se convierten en un detalle de implementación. Las geometrías gráficas, como límites, velocidades, tamaños y posiciones, se proporcionan a motores que posteriormente reaccionan con velocidades, colisiones y posiciones. Los gráficos están en lo más alto de la pila.

El concepto de que los gráficos son independientes de la lógica del juego se demuestra con dos juegos desarrollados por el mismo autor, con la intención de presentar tanto a <svg> como a <canvas>: SVG-oid y canvas-pinball. Un mejor ejemplo de que la capa de gráficos es independiente del motor de juego es comparar canvas-pinball con SVG-Dice dado que ambos usan el mismo motor de física.

Si bien el juego y la lógica de demostración son diferentes, el motor de física de ambos juegos realiza un seguimiento de las posiciones, las colisiones, las velocidades y otros aspectos físicos de los componentes del juego.

Para canvas-pinball, el administrador de animación personalizado de nivel más alto vuelve a dibujar la escena con una serie de API de canvas.


if (animationsInProgress) {
  ctx.save();
  ctx.lineWidth = 2.0;
  ctx.beginPath();
  ctx.moveTo(89, 322);
  ctx.lineTo(101, 295);
    .
    .
    .
  ctx.stroke();
  ctx.restore();
  ctx.moveTo(tVp.x, tVp.y);
}

Para SVG Dice, el administrador de animación personalizado de nivel más alto usa transformaciones en grupos a fin de reubicar los gráficos existentes en la pantalla mediante el DOM.


if (animationsInProgress) 
{
  this.rotation += (this.circleBody.m_linearVelocity.x/20);
  var transFormString = "translate(" +
    Math.round(this.circleBody.m_position.x) + "," +
    Math.round(this.circleBody.m_position.y) + ") scale (" +
    this.scale.toString() + ") rotate(" +
    Math.round(this.rotation).toString() + "," +
    Math.round(this.xTrans).toString() + "," +
    Math.round(this.yTrans).toString() + ")";
    this.die2.setAttribute("transform", transFormString);
}

Entonces, mientras uno vuelve a dibujar y reubica las formas, el otro solamente realiza una reubicación, pero mantiene la forma en la memoria, a un costo. Para la mayoría de los juegos casuales, este costo es bastante bajo, pero la expectativa es que, para los juegos, la idea de los gráficos en modo inmediato con API de menor nivel sea mucho más familiar.

Escenarios avanzados

Es probable que los escenarios más poderosos incluyan la combinación del gráfico entero, de los estilos y las tecnologías del documento.

Diseño de la interfaz de usuario

Hace unos pocos años, se podría haber dicho que la mejor tecnología para diseñar la interfaz de usuario era SVG. Los requisitos concuerdan con SVG. De hecho, al menos un front-end del sistema operativo de Linux se basa totalmente en SVG. Los controles como los controles deslizantes, las casillas de verificación, los botones redondeados y los demás controles sin cuadros del conjunto de controles intrínsecos estándar son ideales para los gráficos vectoriales. Sin embargo, con los desarrollos recientes y futuros en CSS, incluidas las esquinas redondeadas, los degradados, los filtros y los eventos con punteros, la gran mayoría de estos controles pueden desarrollarse con construcciones centradas en documentos HTML estándar de modelo de cuadros. Otros controles, especialmente con los modelos recientes de CSS Grid y Flexbox, se adaptan mejor a los elementos HTML, al menos como contenedores.

A continuación, se muestra un ejemplo de un gráfico controlado por datos enriquecidos. A pesar de que no está bien diseñado, el resultado final está bien representado. Los gráficos y los controles de cuadros son extremadamente difíciles de desarrollar, pero tanto Microsoft como terceros lo han logrado. Reduce la carga de los desarrolladores, ya que proporciona una abstracción para el enlace de datos, ya sea del lado del cliente o del servidor, pero en la actualidad, el lado del cliente que representa a la web ha permanecido estático o ha requerido complementos. A continuación, usamos la riqueza de SVG para proporcionar una experiencia del usuario mejorada. Independientemente del código, que se le entregará al cliente (o tal vez en la interacción futura más declarativa), el gráfico muestra dos componentes claves. El arnés y los datos. El arnés gráfico o texto de fondo es SVG estático y básico:


<rect id="tipsh" x="20" y="100" width="194" height="34" rx="5" ry="5" />
<rect id="tip" x="20" y="100" width="190" height="30" rx="5" ry="5" />
<text id="tiptxt" x="40" y="120" font-size="12" font-family="Arial" fill="#ffffff" visibility="hidden">milliseconds</text>
<polygon id="arrow" points="10,110 20,105 20,115" style="fill:#ffffff" />
<line x1="3" x2="460" y1="359" y2="359" style="stroke:#cccccc;stroke-width:1"/>

Y, a continuación, cada punto de datos particular se proporciona al cliente y se manipula dinámicamente o se genera en el servidor:


<text x="10" y="348" font-size="12" font-family="Arial">{Page}.svg</text>
<rect x="115" y="350" width="86" height="8" style="fill:url(#inverseblue);filter:url(#Gaussian_Blur);" rx="12" ry="12"/>
<rect x="115" y="333" width="86" height="17" rx="12" ry="12" onmouseover="changeColor(evt)" onmousemove="changeText(evt,'2 milliseconds')" onmouseout="changeTextNotOver(evt)" />
<text x="171" y="345" font-size="11" font-family="Arial" fill="#ffffff">6.1%</text>

http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/svgchart.htm

Conclusión

El análisis de las tecnologías de gráficos vectoriales existentes disponibles en los exploradores más modernos permite que los escenarios existentes y nuevos se realicen correctamente con las tecnologías web estándar en una manera interactiva. Para el futuro, tenemos la gran oportunidad de estar a la vanguardia con animaciones declarativas para proporcionar apoyo al espacio publicitario. Al usar el desarrollo de las características controladas por escenarios, podemos dejar atrás a la competencia y proporcionar una experiencia enriquecida gráficamente basada en estándares en aplicaciones y páginas web.

Temas relacionados

Gráficos de HTML5
Scalable Vector Graphics (SVG)
CANVAS Element | canvas Object

 

 

Mostrar:
© 2014 Microsoft