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?
6
A
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
Cuestiones relacionadas
- 1. Arrastrar desde DOM, soltar Canvas o SVG
- 2. Canvas HTML5 o mapa mundial SVG
- 3. es Raphaël usando canvas o svg?
- 4. Necesito acelerar mi SVG. ¿Puedo convertir a WebGL o canvas?
- 5. Canvas vs SVG para juegos simples
- 6. SVG rect vs div vs canvas
- 7. SVG a Canvas con d3.js
- 8. Diagramas en SVG frente a HTML5 Canvas
- 9. Opciones de animación HTML5 Canvas/CSS3/jQuery
- 10. Animación: jQuery o Raphael?
- 11. Guardar una animación creada con HTML5 Canvas
- 12. animación en espera con canvas de HTML5
- 13. Android y reproducción de animación SVG
- 14. Opacidad de animación SVG en el bucle
- 15. ¿Alguna herramienta de animación SVG por ahí?
- 16. Cómo secuenciar la secuencia de animación SVG?
- 17. ¿Hay un equivalente del método toDataURL de canvas para SVG?
- 18. imagen de canvas HTML5 ¿cómo se puede guardar en formato SVG o base 64?
- 19. potentes javascript canvas libraries
- 20. Exportar como SVG en Adobe Illustrator canvas size issues
- 21. Pie, barra, línea: SVG/VML mejor que Canvas
- 22. etiqueta de botón nativa dentro de svg canvas
- 23. Código de ejemplo para incrustar canvas SVG en proyecto SWT?
- 24. Agregar elementos SVG o HTML5 existentes a Box2D World
- 25. Defina una animación de círculo/arco en SVG
- 26. Animación del elemento SVG giratorio en la página web
- 27. Problema de rendimiento SVG en línea vs. incrustación o iframe
- 28. Uso del dispatchDraw (Canvas canvas)
- 29. Cómo dibujar una línea irregular/dibujada a mano usando svg/canvas?
- 30. Backbone.js y three.js - MVC con canvas
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
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. –
Está bien, creo que voy a usar canvas con una de las bibliotecas para agregar eventos. – BigChief