Detalle del libro
Ver Índice
Agradecimientos
Sobre los autores
Prefacio
Qué necesita saber
Cómo está organizado esté libro
Convenciones
Código fuente
Ejecutar los ejemplos del libro
Sobre la ilustración de la cubierta
Capítulo 1. Introducción a HTML5 Canvas
La página básica de HTML
!doctype html
html lang="es"
meta charset="UTF-8"
title.../title
Una página HTML sencilla
El código HTML básico que emplearemos en este libro
div
canvas
El modelo DOM y Canvas
JavaScript y Canvas
Frameworks y librerías JavaScript
¿Dónde va JavaScript y por qué?
HTML5 Canvas de "Hello World!"
Encapsular el código de JavaScript para Canvas
Añadir Canvas a la página HTML
Recurrir a document para establecer una referencia al elemento Canvas en JavaScript
Comprobar si el navegador Web admite Canvas
Recuperar el contexto en 2D
La función drawScreen()
Utilizar Console.log para depurar
El contexto 2D y el estado actual
El objeto HTML5 Canvas
Otro ejemplo: adivina la letra
Cómo funciona el juego
Las variables del juego Guess the Letter
La función initGame()
La función eventKeyPressed()
La función drawScreen()
Exportar Canvas a una imagen
El código final del juego
A continuación
Capítulo 2. Dibujar en el tapiz
La configuración del archivo básico para este capítulo
La forma rectangular básica
El estado de Canvas
Qué no forma parte del estado?
Cómo guardamos y recuperamos el estado de Canvas?
Utilizar trazos para generar líneas
Iniciar y finalizar un trazo
El dibujo
Atributos lineCap
Atributos lineJoin
linewWidth
strokeStyle
Ejemplos de cómo se puede dibujar una línea más avanzada
Métodos avanzados para dibujar rutas
Arcos
context.arc()
context.arcTo()
Curvas de Bézier
La región de recorte de Canvas
Distribución dentro de Canvas
Transformaciones sencillas de Canvas
Transformaciones de rotación y traslación
Lección 1: Las transformaciones se aplicarán a las formas y a los trazos que se han dibujado después de la función setTransform() o se llamará a otra función de transformación
Lección 2. Debemos trasladar el origen del punto para emplear el centro de nuestra forma. Así girará todo a su alrededor
Transformaciones de escala
Combinar las transformaciones de escala y rotación
Rellenar objetos con colores y gradientes
Definir los colores básicos de relleno
Emplear degradados para rellenar formas
Degradados lineales
Degradados radiales
Utilizar modelos para rellenar formas
Crear sombras para las formas de Canvas
A continuación
Capítulo 3. La API de texto de HTML5 Canvas
Mostrar un texto básico
Definir un texto básico
Modificar una cadena de texto en Text Arranger
Establecer una comunicación entre los formularios HTML y Canvas
Emplear measureText
Centrar el texto utilizando su ancho
¿Qué pasa con la altura del texto?
fillText y strokeText
Configurar la fuente del texto
Tamaño, aspecto y estilos básicos de la fuente
Modificar el tamaño y el aspecto de la fuente en Text Arranger
Estilos disponibles
Aspecto de la fuente
Tipografías genéricas
Tamaño de la fuente y control de rango HTML5
Crear las variables necesarias en la función canvasApp()
Configurar los controladores de eventos en canvasApp()
Definir los controladores de eventos en canvasApp()
Definir la fuente en la función drawScreen()
El color de la fuente
Emplear JSColor para definir el color de la fuente
La línea base y la alineación de la fuente
Alineación vertical
Alineación horizontal
Modificar la línea base del texto y su alineación
La versión 2.0 de Text Arranger
El texto y el contexto de Canvas
Alfa y el texto
Modificar las transparencias de globalAlpha
Las sombras globales y el texto
Configurar las sombras globales
Texto con degradados y patrones
Degradados lineales y texto
Los degradados radiales y el texto
Un modelo de imagen y texto
Modificar gradientes y modelos en Text Arranger
Revisión del alto, ancho, escala y toDataURL()
Modificar el tamaño del tapiz dinámicamente
Modificar dinámicamente el tamaño en Text Arranger
Modificar dinámicamente la escala de Canvas
El método toDataURL() del objeto Canvas
La versión final de Text Arranger
A continuación
Capítulo 4. Las imágenes en Canvas
Configuración del archivo básico de este capítulo
Las bases de la imagen
Carga anticipada de imágenes
Emplear drawImage() para dibujar una imagen en Canvas
Modificar el tamaño de una imagen dibujada en el tapiz
Copiar parte de una imagen en el lienzo
Animación de un patrón basado en una celda
Generar un contador de fotogramas para una animación
Generar un bucle de tiempo
Cambiar la imagen que se muestra en pantalla
Animación avanzada basada en celdas
Examinar la hoja de patrones
Originar un array de animación
Elegir el patrón que se mostrará en la pantalla
Emplear bucles para recorrer los patrones
Dibujar el patrón
Mover una imagen por el tapiz
Aplicar transformaciones de rotación a una imagen
Transformaciones básicas de Canvas
Paso 1: Guardar el contexto actual en el stack
Paso 2: Emplear los valores de identidad para reiniciar la matriz de transformación
Paso 3: Código del algoritmo de transformación
Paso 4: Dibujar la imagen
Animar una imagen transformada
Generar una cuadrícula de patrones
Definir un mapa de patrones
Crear un mapa de tiles con Tiled
Mostrar el mapa en el tapiz
Alto y ancho del mapa
Guardar el mapa de datos
Dibujar el mapa en el tapiz
Ampliar una imagen y movernos por su contenido
Crear una ventana para la imagen
Dibujar la ventana de la imagen
Desplazarnos por el contenido de la imagen
Ampliar la imagen y desplazarse por su contenido
Aplicación: controlar los efectos Pan y Zoom
Modificar la escala del zoom
Entrada de datos desde el teclado
Modificar los píxeles
La API para modificar los píxeles de Canvas
Atributos de ImageData
Obtener los datos de una imagen
Colocar los datos de la imagen
La aplicación Tile Stamper
Cómo se organiza ImageData.data
Primera versión de nuestra aplicación
HTML5 está revolucionando sustancialmente la forma de concebir Internet y el diseño de páginas web, consiguiendo estándares de programación que resultan intuitivos, dinámicos y versátiles. Atrás queda tener que depender de una herramienta o plataforma determinada como Flash o Silverlight porque su código quedaba fuera del lenguaje HTML.
El elemento Canvas ofrece a los desarrolladores la oportunidad de crear gráficos animados que se pueden ver a través de los navegadores web convencionales, utilizando herramientas comunes: HTML y JavaScript, si bien se diferencia lo suficiente del desarrollo típico de JavaScript.
A través de la completa cobertura que le ofrece esta obra, en poco tiempo podrá diseñar juegos, aplicaciones de entretenimiento, efectos dinámicos en interfaces de usuario, editores de código, editores gráficos, efectos 3D, etc. Además cuenta con ejemplos prácticos donde se destacan sus características más interesantes y repasa algunas de las propiedades complementarias de HTML5, como su capacidad para trabajar con audio y vídeo.