Uso de gráficos con Canvas, SVG y CSS3 (HTML)
[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]
Esta sección contiene información sobre el uso de gráficos en tu aplicación de la Tienda Windows con JavaScript.
En esta sección
| Tema | Descripción |
|---|---|
El elemento canvas produce un Canvas de mapa de bits rectangular en la página, donde puedes usar JavaScript para dibujar imágenes gráficas sobre la marcha. El Canvas es estupendo para crear juegos o para cualquier situación en la que generes gráficos en tiempo real o tengas que cambiarlos con regularidad. |
|
El elemento Canvas es una región en la que se puede dibujar dentro de tu documento HTML y en la que puedes usar JavaScript para generar gráficos como animaciones, dibujos y juegos. Este tema comienza describiendo los pasos necesarios para animar un dibujo básico con el elemento Canvas. |
|
Las formas y las líneas no están limitadas a los colores sólidos. Un degradado usado en un Canvas en realidad un tipo de valor de color, así que puedes aplicarlo a las propiedades fillStyle y strokeStyle. Los degradados se pueden usar para producir un cambio direccional en intensidad o color en una imagen. Esto resulta útil para generar imágenes de fondo, indicar la altitud en los mapas o en cualquier lugar donde quiera agregar iluminación y sombreado a una superficie. Los degradados son útiles para agilizar tus aplicaciones web ya que puedes evitar tener que usar imágenes para estos efectos y minimizar el ancho de banda y el tiempo que se tarda en cargarlas. Y como se generan mediante programación, se pueden escalar y reutilizar con facilidad. |
|
El elemento Canvas es una región en la que se puede dibujar dentro de tu documento HTML y en la que puedes usar JavaScript para generar gráficos como animaciones, dibujos y juegos. Este tema comienza describiendo los pasos necesarios para animar una imagen con el elemento Canvas. |
Puedes usar los Canvas CSS y SVG en aplicaciones de la Tienda Windows para agregar gráficos de vector ligeros y rápidos, y para animar la interfaz de usuario.
Con SVG o Canvas se puede extraer casi cualquier gráfico de vector, pero a veces hay mucho más trabajo pendiente para el desarrollador o el equipo, según la tarea.
Las transformaciones 2D de hojas de estilo CSS de nivel 3 (CSS3) te permiten traducir (mover), girar, cambiar de escala y sesgar objetos en el espacio 2D. Las transformaciones 3D de CSS3 admiten estas mismas transformaciones en el espacio 3D y, además, pueden simular la profundidad mediante una transformación de perspectiva.
Cuando se especifican varias transformaciones individualmente, sus resultados son acumulativos y dependen del orden en el que se aplican.