Manual de Canvas del HTML 5

Introducción a HTML 5

1.- Qué es HTML 5
Veremos qué es HTML 5, su previsión de tiempo para convertirse en una especificación recomendada y las novedades más significativas que proporcionará. Entrar

2.- Introducción a Canvas del HTML 5
Canvas es uno de los componentes más novedosos de estándar HTML 5 que sirve para dibujar dinámicamente imágenes en una página web. Entrar

Primeros pasos con el elemento Canvas

3.- Ejemplo de dibujo con el API de canvas
Un primer ejemplo de dibujo en un elemento canvas de HTML 5 con el API de canvas y Javascript. Entrar

4.- Entender el lienzo de canvas
Veremos cómo es el lienzo de un canvas, formado por un eje de coordenadas que podemos utilizar para posicionar todos los dibujos que queramos colocar en el canvas. Entrar

5.- Dibujar rectángulos en un Canvas
Cómo dibujar cuadrados y rectángulos en un elemento Canvas de HTML mediante la función fillRect() y strokeRect() de Javascript, válida en HTML 5. Entrar

6.- Trabajando con color de relleno y de trazado en canvas
Análisis de dos atributos esenciales para asignar color a los dibujos que se hacen en el elemento canvas. Atributos fillStyle para el color de relleno y strokeStyle para el color de trazado. Entrar

Dibujar caminos en Canvas

7.- Caminos en Canvas del HTML 5
Veamos cómo realizar dibujos en un canvas con las funciones para caminos, que permiten la creación de estructuras más complejas. Entrar

8.- Ejemplo 2 de dibujo de caminos en canvas
Segundo ejemplo sobre los caminos en el elemento canvas, donde veremos las funciones closePath() y stroke(). Entrar

9.- Caminos en canvas: ejemplo 3
Cómo dibujar un camino en canvas de HTML 5 con diversas variantes, cerrado y sin cerrar, y con o sin relleno de color. Entrar

10.- Otros ejemplos de dibujo de caminos en elementos Canvas
En este artículo veremos otras pruebas de dibujo de caminos en los canvas. Entrar

11.- Curvas en caminos de Canvas del HTML 5
Los caminos en los elementos canvas del HTML 5 pueden tener curvas, que conseguimos por medio de los arcos, las curvas cuadráticas y las curvas bezier. Entrar

12.- Dibujo de curvas con arcos en canvas
Cómo dibujar arcos, para hacer curvas basadas en circunferencias o segmentos de ellas, en el lienzo de los elementos Canvas del HTML 5. Entrar

13.- Curvas cuadráticas en el canvas
Las curvas cuadráticas son un tipo especial de curva que se define por tres puntos, dos para el inicio y fin de la curva y otro para su tendencia. Entrar

14.- Rectángulos con esquinas redondeadas en canvas, interactivo con Mootools
Vemos las curvas cuadráticas a través de un ejemplo interactivo de trabajo con caminos en canvas del HTML 5 que dibuja rectángulos con esquinas redondeadas. Entrar

15.- Curvas Bezier en Canvas
Las curvas Bezier son la manera más compleja de especificar dibujar caminos curvos en el elemento canvas del HTML 5. Entrar

Trabajo con imágenes en Canvas

16.- Usar imágenes en el Canvas
Dibujar el contenido de imágenes en los elementos canvas del HTML 5, usando cualquier tipo de archivo gráfico permitido (gif, jpg, png) para incluir una imagen en el lienzo de un canvas. Entrar

17.- Maneras de acceder a objetos Image para mostrar en el canvas
Otro ejemplo de dibujo en con el API de canvas del HTML 5, en el que incluimos imágenes traídas por diferentes vías posibles con Javascript. Entrar

18.- Escalado y recorte en imágenes en canvas
Escalado y recorte de imágenes en el elemento canvas. Como cambiar el tamaño y recortar las imágenes al dibujarlas en el lienzo de canvas del HTML 5. Entrar

19.- Mosaico de imágenes en Canvas
Cómo realizar un patrón de repetición o mosaico de imágenes en el elemento Canvas del HTML5, lo que se conoce en inglés como Pattern. Entrar

Configuraciones de dibujo de líneas

20.- Grosor de la línea en Canvas
Cómo alterar el grosor de la línea cuando dibujamos el contorno de un camino o un rectángulo en un elemento Canvas del HTML 5. Entrar

21.- Extremos de las líneas en canvas
En las líneas que se dibujan en los elementos canvas del HTML 5 se pueden configurar distintos tipos de extremos, cuadrados, redondeados, etc. Entrar

22.- Uniones entre segmentos de líneas en canvas con lineJoin
Cuando una línea consta de varios segmentos, las junturas o uniones entre los distintos segmentos se pueden configurar de diferentes maneras con la propiedad lineJoin. Entrar

23.- Límite de la punta del ángulo con miterLimit en canvas
Cuando configuramos el valor miter para el parámetro lineJoin, podemos configurar un límite de tamaño para la punta que formará el ángulo de los segmentos de la línea con miterLimit. Entrar

Prácticas y librerías para trabajo con Canvas

24.- Juego del ahorcado Javascript con jQuery UI y Canvas del HTML 5
Aplicación experimental del juego del ahorcado en Javascript, con jQuery y las librerías jQuery UI y uso del elemento Canvas del HTML 5. Entrar

25.- Introducción a Processing.js
Processing.js es un framework Javascript para dibujo y animación mediante el elemento Canvas del HTML5. Entrar

26.- FlashCanvas: elemento canvas compatible con todos los navegadores
FlashCanvas es una librería Javascript para conseguir que el elemento canvas del HTML 5 funcione en navegadores que no lo soportan, como Internet Explorer 6 al 8. Entrar

27.- Animaciones en el Canvas con EaselJS
Experimentando con el desarrollo de juegos con HTML5: cómo crear animaciones en el Canvas con las librerías EaselJS. Entrar

28.- Cómo elegir Canvas o SVG para tus sitios Web
Aquí voy a compartir con vosotros algunas reflexiones que os pueden ayudar a la hora de elegir entre Canvas y SVG, o una mezcla de ambos. Entrar

29.- Guía del Canvas HTML5 para desarrolladores
El elemento canvas de HTML5 es la funcionalidad más interesante que van a querer utilizar los desarrolladores para crear aplicaciones realmente avanzadas para la Web sin necesidad de instalar complementos en el navegador. Entrar

30.- Cómo crear una galería de imágenes con el Canvas de HTML5
En este tutorial vamos a recorrer todos los pasos necesarios para crear una biblioteca de imágenes que podemos incluir en nuestro sitio web. Entrar