</> CodeBooks
    ← Volver a HTML5 (página 8)
    Portada de HTML5 Canvas Cookbook

    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?

    TeóricoPráctico

    Con ejercicios

    • ✓ Incluye ejercicios
    • ✗ Sin proyectos

    Más de HTML5 con nivel Intermedio