Manual de Canvas del HTML 5

Manual del elemento Canvas del HTML 5 en el que aprenderemos a dibujar sobre los lienzos, utilizando Javascript y el API de Canvas.

Si te parece útil este manual ayúdanos compartiendo!! :)

Listado de los capítulos

Introducción a HTML 5 Qué es HTML 5 y qué novedades traerá consigo en el desarrollo de páginas web, entre las que destaca el elemento CANVAS, que estamos explicando en el presente manual.

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á.

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.
Primeros pasos con el elemento Canvas Introducción al elemento Canvas y primeros ejemplos de dibujo. Aprendemos a crear rectángulos y a configurar los colores que se utilizan en el dibujo.

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.

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.

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.

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.
Dibujar caminos en Canvas A través de los caminos se pueden dibujar todo tipo de figuras en el lienzo de Canvas. Vemos todos los tipos de caminos que existen y diferentes ejemplos prácticos.

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.

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().

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.

10.- Otros ejemplos de dibujo de caminos en elementos Canvas

En este artículo veremos otras pruebas de dibujo de caminos en los canvas.

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.

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.

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.

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.

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.
Trabajo con imágenes en Canvas A través de la utilización de imágenes se pueden mejorar mucho los diseños que se realizan en los canvas. Además mostramos distintas maneras de modificar dinámicamente por medio de scripts el aspecto de las imágenes.

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.

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.

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.

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.
Configuraciones de dibujo de líneas Las líneas que dibujamos en el recorrido de los caminos en un canvas se pueden configurar con diferentes parámetros, como el grosor, la forma de sus extremos, el redondeo de las esquinas, etc.

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.

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.

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.

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.
Prácticas y librerías para trabajo con Canvas Diversos artículos sueltos que te ofrecerán guías para saber por dónde continuar aprendiendo sobre el elemento Canvas. Se trata de ejemplos prácticos para afianzar tus conocimientos y presentaciones de librerías Javascript para el trabajo con Canvas que permiten realizar animaciones y juegos basados en HTML5 de una manera más sencilla.

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.

25.- Introducción a Processing.js

Processing.js es un framework Javascript para dibujo y animación mediante el elemento Canvas del HTML5.

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.

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.

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.

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.

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.

Descargas

 Si eres usuario de DesarrolloWeb:
Archivo de descarga Manual de Canvas del HTML 5 Texto completo en PDF, listo para imprimir, del manual de DesarrolloWeb.com Manual de Canvas del HTML 5. Descarga compilada y actualizada el día 28/10/2010.
Tamaño: 407633

Compartir

Comentarios

katia

10/10/2010
hola
quiero bajar este tutorial pero no se como???

MOJICA

19/10/2010
Acerca de Manual de Canvas en html5
Deberían de mostrar la opción para descargar un archivo del manual completo.

midesweb

28/10/2010
Descarga del manual de canvas
Hola! acabamos de publicar el PDF para la descarga de este manual del elemento canvas de HTML 5.

lionel

08/11/2010
Muchas gracias!!!
Quiero saber las novedades de HTML5 y este manual esta buenisimo, ustedes siempre con lo mejor... saludos.

Iker

09/11/2010
Mas tutoriales
Aquí tenéis unos ejemplos prácticos que os pueden interesar:

http://www.ikeralbeniz.net/2010/11/03/jugando-con-html5-canvas-y-svg-i/
http://www.ikeralbeniz.net/2010/11/04/jugando-con-html5-canvas-y-svg-ii/
http://www.ikeralbeniz.net/2010/11/08/jugando-con-html5-animaciones/

Rockolin

01/2/2011
Porblemas con canvas en IE
Oigan tengo un problema con canvas, no se puede visualizar en IE ya baje un script y el prototype y ni asi me deja verlo
Alguin sabe que puedo hacer
Saludos

karen elizabeth

23/3/2011
HTML5
HOLA!! conosco muy poco sobre este tema....de hecho apenas estoy comenzando a fogearme mas en esto del html5, sus ventas y desventajas... me intereza mucho saber sobre este tema ya que estoy realizando un proyecto de metodologia de investigacion sobre el html5 para mi titulacion...... me gustaria compartir ideas y opiniones con gente que tiene mas experiencia en esto de la programacion y que comparta un ideal diferente, me gustaria concer distintos puntos de vista sobre este concepto del html5, por los comentarios que he leido algunos pueden ser positivos y otros negativos... me gustaria mucho escuchar los puntos de vista de gente que como yo estan interesados en saber un poco mas sobre el html5, las consecuencias que esto nos traera, las posibles ventajas y las repercusiones que tendra. me gustaria saber un poco mas sobre este tema ya que es motivo de mi investigacion....QUISIERA HACER LAS COSAS BIEN!!! ME GUSTARIA HACER UNA INVESTIGACION DETALLADA, EXPLICITA Y BIEN ARGUMENTADA... para poder defender mi tesis....GRACIAS POR SU AYUDA.... ahora estoy checando algunas paginas que podrian ser de utilidad y me gustaria me ayudaran...si tienen algunas referencias y/o opiniones porfavor contactense conmigo .... mi correo es licke86@hotmail.com....GRACIAS!!

licke

01/4/2011
NO PUEDO DESCARGAR EL MANUAL DE CANVAS
NECESITO ME AYUDEN...SI ALGUIEN LO TIENE PORFAVOR ENVIENMELO A MI CORREO ES licke86@hotmail.com DE VERDAD S ELOS AGRADECERIA, LO NECESITO ME URGE!! YA QUE EN BASE A ESTE TEMA DEPENDE MI TITULO..... HE TRATADO DE DESCARGARLO VARIAS VECES PERO ME MARCA ERROR AL ABRIRLO..PORFASSS AYUDENMEEEE!!!

Jorge Ramos

09/5/2011
Gracias
Excelente tutorial. Felicidades y muchas gracias!!!

vallarta

18/5/2011
como bajarlo
como puedo bajarlo

rafael_santos-510086

15/7/2011
buen tuto
muchas gracias buen tuto, espero uno mas general...

codigofuente

29/8/2011
Enhorabuena por el Manual
Muchas Gracias por este Manual de HTML5! me ha sido de gran ayuda!!

Stratos

12/10/2011
manual html5
Buen manual para aprender html5

Canvas

02/11/2011
Librería para canvas html5
Esta librería contiene mucha información y ejemplos del html5 canvas.
H5chart (sourceforge).

Miguel

13/11/2011
Buen artículo
Muy buen artículo,

Os recomiendo el foro de html5

www.foroshtml5.com

Es una comunidad española de HTML5!!

Un saludo!

carlos

20/4/2012
no puedo descargar
hola buenas quisiera descargar este manual que esta buenisimo pero cuando intento descargar no puedo y lo necesito urgente por favor si alguien me puede ayudar se lo agradeceria mi emeil mis.ter1@hotmail.es

xinote

18/12/2012
mapa para web
Hola me gustaria saber si se puede hacer con canvas una web con un mapa de españa y que al pinchar te redireccione a distintas secciones o localidades algo asi como los que hay para seleecionar una tienda de alguna web.
muchas gracias

neomode

17/2/2014
ERROR DE ORTOGRAFÍA
PÁG. 18

Si HABEMOS observado ..... debe ser .... Si hemos observado.....

Perdón por la corrección, pero soy profe y estas cosas me chirrían.