Cómo utilizar la etiqueta de tela en su juego html5
los simpleGame El motor del Escena objeto utiliza uno de los más emocionantes características de HTML5 - la etiqueta canvas. Esta etiqueta apasionante le permite dibujar imágenes y otros elementos directamente en una parte del navegador.
Un breve vistazo a un lienzo en juego
Aquí hay una página básica mostrar un lienzo con dos rectángulos y una imagen.
Demostración básica lienzo
lienzo de dibujo básico para su juego
La etiqueta canvas es una etiqueta HTML, pero se utiliza principalmente como un marcador de posición en HTML. La etiqueta canvas tiene una contexto atributo, lo que permite al programador para dibujar gráficos directamente en la página. Así es como funciona este ejemplo:
Añadir una etiqueta lienzo para el código HTML.
Video: Curso de HTML5 - 03 - Elementos HTML - Atributos - Etiqueta Meta
Normalmente, creará una etiqueta de lona en el HTML, pero el simpleGame biblioteca añade automáticamente una etiqueta de tela y lo añade al final del cuerpo de la página.
Crear una función para el dibujo.
En este ejemplo, el lienzo se dibuja en una función llamada cuando la página se carga inicialmente. En simpleGame, la función de dibujo será llamado 20 veces por segundo.
Obtener un contexto de dibujo.
La etiqueta canvas soporta un contexto de dibujo 2D (sí, 3D está llegando, pero todavía no está ampliamente soportado). Utilizar el getContext () Método para hacer una referencia al contexto de dibujo.
Crear un javascript Imagen Objeto.
Video: Tutoriales HTML5 + CSS3 - 03 Etiquetas Semánticas e Icono de Pagina
Duende objetos en el simpleGame la biblioteca se basa en imágenes de javascript. Comience por crear una Imagen objeto en javascript.
Establecer el atributo de la fuente de la imagen.
Video: Explicación de las etiquetas de HTML5 (parte 1/4)
Para vincular un archivo a la Imagen objeto, establezca la src propiedad de la Imagen oponerse a un archivo de imagen en el mismo directorio que el programa. Esto asociar una imagen con el documento, pero la imagen no será dibujado en la página- lugar, se almacena en la memoria para ser utilizado en el código.
Ajuste el estilo de relleno.
Puede dibujar dibujos llenan y se abren con la etiqueta canvas. los fillStyle Se puede establecer en colores, así como los patrones y degradados.
Crear rectángulos.
Puede dibujar un rectángulo abierto con el strokeRect () método y un rectángulo sólido con el fillRect () método. En el simpleGame biblioteca, el Escena objetos claro() Método simplemente dibuja un rectángulo relleno de color de fondo de la escena.
Dibujar la imagen en el lienzo.
Utilizar el drawImage () método para dibujar una imagen dentro de un lienzo. Hay muchas variaciones de este método, pero la utilizada en simpleGame especifica la posición y el tamaño de la imagen.