Curso de HTML5 para aprender a usar <canvas>

Curso de HTML5 para aprender a usar <canvas>Muchas de las nuevas prestaciones que nos trae HTML5 son muy buenas, sin embargo no hay un lugar donde se concentren en cada una, logrando que se hable más a profundidad y no nada más nos den una mera embarradita de eso. Canvas es el ejemplo ideal, ya que aunque sólo aquellos que ya han trabajado con gráficos programando podrán agarrarle la onda, los que no pues no siempre están contentos de nada más dibujar líneas.

A continuación les voy a platicar del sitio web html5canvastutorials que como su nombre lo dice, se especializa en que conozcamos todo el potencial de la etiqueta canvas, empezando con pequeños ejemplos muy sencillos para ir profundizando cada vez más.

Casi no recomiendo sitios web aquí en el blog, pero creo que este tipo de sitios son muy buenos para todos. Entonces, les dejo al menos los temas que trata el sitio para manipular la etiqueta canvas, que como sabemos, va de la mano con javascript.


1. 2d Basics

2. 2d Advanced

3. KineticJS

4. Three.js

1.1 HTML5 Canvas

1.1.1 Canvas Element

1.2 Lines

1.2.1 Line

1.2.2 Line Width

1.2.3 Line Color

1.2.4 Line Cap

1.3 Curves

1.3.1 Arc

1.3.2 Quadratic Curve

1.3.3 Bezier Curve

1.4 Paths

1.4.1 Path

1.4.2 Line Join

1.4.3 Rounded Corners

1.5 Shapes

1.5.1 Custom Shape

1.5.2 Color Fill

1.5.3 Rectangle

1.5.4 Circle

1.5.5 Semicircle

1.5.6 Clipping Region

1.6 Fill Styles

1.6.1 Linear Gradient

1.6.2 Radial Gradient

1.6.3 Pattern

1.7 Images

1.7.1 Draw Image

1.7.2 Image Size

1.7.3 Image Crop

1.7.4 Image Loader

1.8 Text

1.8.1 Text Font & Size

1.8.2 Text Color

1.8.3 Text Stroke

1.8.4 Text Align

1.8.5 Text Baseline

1.8.6 Text Metrics

1.8.7 Text Wrap

Como pueden ver si abarca bastantito, y creo que con esto es más que lo elemental para poder empezar a crear gráficas dinámicas, ya que al final para eso nos va a servir está nueva herramienta de HTML5.

Lo vi en gloobs

Curso de HTML5 para aprender a usar <canvas> Curso de HTML5 para aprender a usar <canvas> Reviewed by Marcos Rivas Rojas on miércoles, abril 04, 2012 Rating: 5