Tenemos que crear los siguientes componentes:

oFondo estático de la postal que guardaremos como una imagen jpg de 800x533px.

Ya hemos indicado que hemos usado Corel Draw/Illustrator y Photoshop.

oCódigo HTML para el visor que contiene el canvas y SVG así como el código javascript que manipula su contenido.

Hay que destacar que se han superpuesto los 2 canvas, primero el Tag <svg> (<div id="postal">) con los elementos vectoriales, lista de nombres y brillos, y encima el Tag <canvas> (<div id="nevando">) con los copos de nieve cayendo. La superposición se consigue mediante CSS:

#nevando {

   /* Anclamos la postal en un punto fijo. De esta forma el Canvas con la nieve cayendo se coloca encima */

   position: absolute;

   left: 0px;

   top: 0px;

}


El marco principal  (<div id="marco">) envuelve a las 2 divisiones anteriores (postal y nevando).
El siguiente código CSS consigue el centrado vertical y horizontal en la ventana del visor HTML.

#marco {

   width: 800px;

   height: 533px;

   top: 50%;

   left: 50%;

   margin-top: -265px;

   margin-left: -400px;

   position: absolute;

   border: 1px solid black;

}

Fijémonos también que para refrescar los copos de la nevada tenemos que redibujar constantemente el contenido del canvas (<canvas id="canvas">) mediante la función setInterval(dibujar, 1000/fps) que llama a la función dibujar() n-veces por segundo. Así es como funciona el canvas de HTML5, para mostrar el cambio de un solo pixel tenemos que repintar todos los pixeles del canvas.

Sin embargo los nombres cayendo y girando son elementos vectoriales que tienen asociado cada uno una animación (transform: "tx,y rg,x,cy") que consiste en un desplazamiento en horizontal y vertical al mismo tiempo que van girando. Esta animación se repite constantemente. El motor SVG de HTML5 solo redibuja el elemento vectorial que determina la animación correspondiente.

Cuando los nombres cayendo son muchos se produce una ralentización general debido al gran número de transformaciones SVG con la animación asociada. Por ello se han sustituido los elementos SVG con los nombres por elementos del canvas (texto del canvas). Cada nombre se moverá en la postal como un copo más. Así se ha conseguido optimizar la animación general de la postal.

La librería pública snap.svg facilita enormemente la gestión de los elementos svg.

También tenemos un elemento path svg que muestra un brillo. La función brillo() es ejecutada cada 3 segundos mediante la función setInterval(brillo, 3000).

oSolución Velneo con el proyecto de aplicación y el de datos.

Disponemos de una tabla NOMBRES en la que guardaremos los nombres que van cayendo como copos de nieve. El usuario introduce su identificativo para que se vaya guardando en esta tabla.

El proyecto de Aplicación se compone únicamente de un formulario FRM_SVG_VISOR_HTML que se ejecuta en modo SDI como formulario principal del AUTOEXEC. En el evento ON_SHOW pedimos el nombre del usuario que añadimos a la tabla NOMBRES y a continuación componemos el código HTML que mostramos en el Visor HTML.


Con todos estos elementos el aspecto de la postal navideña debería quedar así,



Created with the Personal Edition of HelpNDoc: Full-featured Documentation generator