2012-03-11 16 views
6

Me preguntaba si es mejor hacer una animación como this en lienzo o svg (rendimiento)? Lo estoy reescribiendo ahora en jquery, pero leo en alguna parte que un lienzo se vuelve a dibujar cada vez que cambia.Animación SVG o Canvas?

Respuesta

9

Para estas animaciones "simples" y gráficos de escena, en realidad no importa si usa SVG o Canvas en cuanto al rendimiento. Ambos deberían funcionar bien sin problemas de rendimiento.

Sin embargo, podría ser más fácil crear animaciones con SVG en comparación con Canvas. En Canvas tiene que volver a dibujar toda la escena y en SVG puede simplemente crear el anillo una vez y luego definir una transformación (rotación) en él.

Para SVG echa un vistazo a d3.js o raphael y para la lona se puede extraer processingjs, fabric.js, kinetic.js o paper.js

+0

Cuando se dibuja un círculo o algo en un lienzo, es posible añadir un evento a ella de una ¿lona? ¿Y con SVG? Buenos ejemplos que enviaste :) – BigChief

+3

Bueno, en Canvas puro no es posible adjuntar eventos a primitivas/formas. Debes escribir el código para la detección de aciertos (comprueba si la posición del mouse está dentro del círculo). Sin embargo, las bibliotecas de lienzo mencionadas anteriormente pueden admitir eventos en formas ya que generalmente tienen una capa de abstracción. SVG admite eventos en formas de fábrica y esa es la razón por la cual la interacción también es más fácil de implementar en SVG que en Canvas. –

+0

Está bien, creo que voy a usar canvas con una de las bibliotecas para agregar eventos. – BigChief

Cuestiones relacionadas