Html 5, y el Canvas

Después de la entrada de ayer, en la que comentaba que había encontrado una aplicación web, que realizaba lo que flash, pero online. Seguí curioseando sobre el html, y canvas, que es lo que utiliza esta aplicación. El elemento Canvas es un nuevo elemento de html5 que actua como cualquier div, solo que javascrip tiene una serie de funciones especificas para el.
Entrando en el trapo, en javascript hay que recoger, el id del elemento, hay que dotarlo de un contexto, y a dicho contexto, se le aplican las funciones. Clarisimo vamos.

Venga explico un poco más, pero si no sabes javascript, os enterareis de bien poco.

1.  En html se crea un canvas, con sus dimensiones y su id, muy importante, ya que es de lo que hablamos.
2. En el head que es donde van los scripts, se crea un script y dentro de el se crea una variable y se llama al canvas por su nombre, vamos su id, tal que así: " var elemento = document.getElementById('micanvas');" Acordaros de las mayúsculas y de las comillas simples, no se porque no me funcionaba con dobles.
3. Si hemos recogido el elemento, se puede comprobar con un if, el siguiente paso es coger el de este elemento, el contexto 2d. Que viene ha ser lo que va dentro del canvas, esto es como la buena cocina ha fuego lento va mejor todo: var contexto = elemento.getContext('2d'); Cogemos el 2d porque es lo que he probado, para dibujar cosas en el canvas.
4. Bueno, pues tenemos el contexto en una variable, de javascript, se comprueba con otro if, y a aplicar allí las funciones.

FUNCIONES BÁSICAS:

Todas las funciones son del contexto por lo que se pondrá contexto.funcion();

• fillRect(posicion_x, posicion_y, ancho, alto) ---Dibujar rectangulo con fondo
• strokeRect(p_x, p_y, ancho, alto) --- Dibujar rectangulo el borde

Estas funciones puede tener unas previas para indicar el color:

• fillStyle = 'red';
• strokeStyle = 'red';

Se entiende cada una para que es.

• beginPath(); --Comenzar un camino, una serie de lineas
• moveTo(x, y); -- Mover el puntero sin pintar
• lineTo(x, y); -- Trazar la linea
• closePath(); -- Terminar Camino
• fill(); -- Si el camino no está cerrado lo cierra automático y pinta el fondo
• strok(); -- No lo cierra, solo pinta la linea
• clearRect(p_x, p_y, ancho, alto); -- Como la de hacer rectángulo, pero lo borra

Ahora tocan las curvas, que hay tres tipos, arcos con la función arc(), mucho parámetro y algunos de ellos son radianes, yo no termino de verle la gracia. 

También esta la quadraticCurveTo() esta me gusta mas, se basa en 3 puntos donde empieza este no hay que pasarlo, ya que sera donde tengamos el puntero moveTo, el final y uno imaginario que será el que estirará de la linea recta por así decirlo. Los cuatro parámetros son:

1. Posicion X del punto  de tendencia de la curva
2. Posición Y del mismo punto
3. X del final de la curva
4. Y del final.

Mucho mas fácil que con radianes. Las otras son las Beizer o algo así, estas tienen dos puntos de tendencia, llevarán 2 parámetros más y nada un punto la tendencia de mitad de curva, y otro la otra mitad.

En el siguiente, ya explico las imágenes y demás. Dejo una chuletita de funciones, que siempre viene bien.