Canvas en HTML 5 (degradado)

CANVAS es un elemento no estándar que permite dibujar gráficos directamente sobre el HTML. es decir podemos realizar por medio de trazos. lineas, colores, etc imagenes desde código JavaScript. Inicialmente lo implementó Apple para Safari, pero ahora es WHATWG (Web Hypertext Application Technology Working Group) quien se encarga de su estandarización.

Al no ser un estándar, se han levantado voces en contra de ello, sobre todo existiendo el SVG que realizaría la misma función. La cuestión sobre cual es más correcto, si el SVG o CANVAS, es algo de lo que ya se ha tratado y aunque en ambos casos se puede hacer lo mismo, parece que el SVG gana por ser un estándar y sobre todo cuando se quiere que haya interacción con el usuario, aunque CANVAS sea más útil a la hora de dibujar.

Bien con esta breve descripción de lo que es CANVAS, les traigo el siguiente ejemplo de lo que podemos realizar con HTML 5 y JavaScript.

Ejemplo:


Tu navegador no soporta canvas




Descripcion:
Bien para ello tenemos lo siguiente, dentro de nuestro cuerpo (body)  de HTML la etiqueta llamada canvas podemos definir el alto y ancho de nuestra elemento así como un estilo para el borde como se muestra a continuación:


<canvas height="400px" id="gradiente" style="border: 1px solid black;" width="400px">
Tu navegador no soporta canvas
</canvas>

Dentro de nuestra etiqueta podemos colocar un texto. A lo cual nuestro elemento si no es soportado por nuestro navegador mostrara el mensaje en vez del contenido.

Es importante notar que le coloque un id a mi elemento canvas, esto para poder manejarlo en mi siguiente código.

Declaramos un script de tipo javascript para poder realizar una gradiente dentro de nuestro elemento, para ellos declaramos variables donde obtenemos el control de nuestro gradiente, otro variable donde obtenemos un contexto en 2d ( aun no existe 3d) para poder realizar nuestro cometido.

<script type="text/javascript">
var c=document.getElementById("gradiente");
var cxt= c.getContext("2d");
Seguido por otra variable donde empezamos a crear una linea de gradiente y le asignamos los valores que deseamos, para ello tenemos 4 posiciones en nuestra propiedad createLinearGradient donde los primero significan dos significan a partir de que punto de X y Y empieza nuestra transformación, las siguientes posiciones a partir de que tramo se inicializa nuestro gradiente, podemos jugar con ellos para poder ir viendo como interactúa.
 var grd= cxt.createLinearGradient(0,0,400,400);

Bueno una vez declarado nuestros valores, empezamos a dibujar nuestros gradientes, para ello con la propiedad addColorStop, con sus dos valores o parámetros, donde 0 a 1 es área de dibujo, es decir de 0 a 400, seguido por el color que deseamos dibujar.
 grd.addColorStop(0,"White");
 grd.addColorStop(.125,"darkblue");
 grd.addColorStop(.25,"blue");
 grd.addColorStop(.375,"darkred");
 grd.addColorStop(.5,"red");
 grd.addColorStop(.625,"darkgreen");
 grd.addColorStop(.75,"green");
 grd.addColorStop(.875,"yellow");
  grd.addColorStop(1,"Black");

Una vez declarado los valores procedemos a asignar nuestro gradiente a nuestro control y así poder imprimirlo en nuestro canvas.
 cxt.fillStyle=grd;
 cxt.fillRect(0,0,400,400);

</script>


Nótese que si damos click derecho a nuestro canvas con la gradiente, este lo reconoce como una imagen, y nos da la opción de poder guardarlo como tal.

Espero les halla sido claro este pequeño ejemplo y si tienen dudas no duden en comentarlo.
Saludos Cordiales.

Atte.
LSCA Gustavo Ortiz Gámez.