
HTML5 Canvas Cookbook
Eric Rowell
- Editorial
- Packt
- Año
- 2011
- Páginas
- ~348
- Nivel
- Intermedio
De qué trata
Recetario práctico de Eric Rowell, fundador de Html5CanvasTutorials.com y creador de la librería KineticJS, dedicado por completo al elemento canvas de HTML5 y a su API de dibujo 2D, tal como estaba implementada en los navegadores de 2011. Reúne más de 80 recetas y está pensado para desarrolladores que ya manejan HTML y JavaScript y quieren crear gráficos, animaciones y contenido interactivo directamente en el navegador, sin plugins.
El recorrido avanza de lo básico a lo avanzado: trazado de líneas, arcos, curvas cuadráticas y de Bézier, espirales y texto; dibujo de formas, composiciones y transparencias; manejo de imágenes y video, copiar y pegar regiones del canvas, manipulación de píxeles, conversión a data URLs y efectos como el pixelado. Después dedica un capítulo a las transformaciones (traslación, escala, rotación, espejo, transformaciones personalizadas y la pila de estados del contexto) y pasa a lo que la API no ofrece de forma nativa: animación con bucles de dibujo e interactividad, asociando eventos de ratón y táctiles a formas y regiones del lienzo.
La parte final propone plantillas más completas: clases reutilizables para gráficos de pastel, de barras, de líneas y un graficador de ecuaciones; un capítulo de desarrollo de un videojuego en canvas; y una introducción a WebGL con un envoltorio propio, un cubo giratorio y un pequeño mundo 3D explorable. Aporta una base sólida del canvas «a mano», útil para entender lo que hacen librerías como KineticJS, Konva o Chart.js; eso sí, el código es de la era previa a ES6 y algunas técnicas (por ejemplo, el manejo de animaciones o de eventos) hoy se resuelven de forma más moderna con requestAnimationFrame y Pointer Events. Conviene leerlo como referencia de fundamentos más que como guía actualizada.
- Canvas 2D API
- Paths y curvas
- Texto en canvas
- Imágenes y video
- Manipulación de píxeles
- Transformaciones
- Animación
- Eventos e interactividad
- Gráficos y charts
- Desarrollo de juegos
- WebGL
¿Cómo enseña?
Con ejercicios
- ✓ Incluye ejercicios
- ✗ Sin proyectos

