tutorial examples ejemplos aprender javascript vector html5 vector-graphics

javascript - examples - ¿Cuál es mejor y por qué? RaphaelJS o HTML5 Canvas?



html5 canvas tutorial (5)

Raphael es una biblioteca de gráficos vectoriales, hecha usando SVG, mientras que el lienzo HTML5 es gráficos de mapa de bits.

Si quieres hacer gráficos vectoriales, creo que ir con Raphael es probablemente una buena opción sobre el lienzo "solo". Como dices, el lienzo no funciona con IE y probablemente pase un tiempo antes de que sea compatible de forma nativa. Si Raphael hace lo que necesita, no hay una razón particular para no usarlo.

Tenga en cuenta que también hay otras bibliotecas para esto: Excanvas, que emula canvas para IE usando VML (hasta donde yo sé), y también algunos otros que hacen lo mismo con Silverlight y Flash, pero olvidé sus nombres.

También está Dojo, que tiene un componente para abstraer el uso del lienzo detrás de una interfaz fácil de usar, que también es compatible con IE.

Tener lienzos nativos en todos los navegadores no hará que las bibliotecas se vuelvan obsoletas, ya que las bibliotecas suelen abstraer algunas de las complejidades del lienzo, facilitando el uso.

¡Encontré una biblioteca de vectores en Internet que incluso funciona con IE6!

http://raphaeljs.com/index.html

Es asombroso.

Ahora mi pregunta es mejor que el próximo HTML5 <canvas>? La única razón por la que pregunto es que podrían pasar años antes de que Microsoft implemente un <canvas> que no requiera un complemento para que se ejecute.

Y será aún más largo hasta que todos los usuarios de IE en Internet se deshagan de sus navegadores antiguos, de modo que incluso podamos justificar el uso de HTML5 <canvas>.

Me limito a cumplir con los estándares, pero este solo va a llevar demasiado tiempo, gracias al lento desarrollo de MS de su navegador.

¿Pensamientos?


SVGWeb ( http://code.google.com/p/svgweb/ ) de Google es lo que desea. Hace que IE sea compatible con SVG, que es el estándar, y que todos los demás navegadores mainstream ya admiten. En otras palabras, como dice google, "Al usar la biblioteca más la compatibilidad SVG nativa, puede apuntar instantáneamente ~ 95% de la base web instalada existente".


Y puede usar http://code.google.com/p/explorercanvas/, que implementa el HTML5 Canvas Standard en IE. Todo lo que haces es agregar:

<head> <!--[if IE]><script src="excanvas.js"></script><![endif]--> </head>

La diferencia entre Canvas y SVG se explica de la siguiente manera:

SVG y canvas no son realmente tecnologías intercambiables. SVG es un tipo de gráficos de modo retenido en el que todo se extrae de un modelo bastante abstracto (el documento SVG). Canvas, por otro lado, es un tipo de gráficos de modo inmediato, donde no hay un modelo y el cliente (JavaScript) debe encargarse de redibujar, animaciones, etc.


La respuesta depende de lo que necesites:

  • si necesita agregar manejadores de eventos a los objetos gráficos: necesita usar SVG. Else Canvas.

  • si no se necesitan eventos es importante el rendimiento: en caso afirmativo, Canvas 5.

Tenga en cuenta que IE 9 es compatible con Canvas y ofrece más compatibilidad con HTML 5 en comparación con otros navegadores.


estaba buscando "raphael vs canvas" el post aquí tiene 5 años. Tiene algo chaneged desde entonces? Es raphael obsolet?