Dibujo de gráficos en HTML5

La etiqueta CANVAS es usada para contener gráficos en paginas web. Deberás usar JavaScript para hacer los gráficos. La mayoría de navegadores ya esta soportado esta etiqueta.

Fue introducido inicialmente por Apple para el MAC OS X Dashboard y luego implementado por Safari y Google Chrome.

El tamaño por defecto del CANVAS es 300px * 150px [ancho (width) * alto (height)]. Pero se puede personalizar el tamaño usando las propiedades height y width de CSS. Con el fin de dibujar gráficos en el lienzo CONVAS se usa un objeto de contexto de JavaScript que crea gráficos sobre la marcha.

<canvas id=dib1 width=200 height=100></canvas>

El tamaño por defecto es de 300px x 150px

Siempre asigna un id para poder hacerle referencia y puedes ponerle un estilo CSS, como borde.

1. Linea

var c = document.getElementById("graf1");
var ctx = c.getContext("2d");
ctx.moveTo(10,10);
ctx.lineTo(190,90);
ctx.stroke();

2. Circulo

var c = document.getElementById("graf2");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

3. Texto

var c = document.getElementById("graf3");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hola Mundo",10,50);

4. Gradiente

var c = document.getElementById("graf4");
var ctx = c.getContext("2d");

//Crear gradiente
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

//Rellena gradiente
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);

5. Doble Gradiente

var c = document.getElementById("graf5");
var ctx = c.getContext("2d");

//Crear gradiente
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

//Rellena gradiente
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);

6. Imagen

var c = document.getElementById("graf6");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);

7. Recuadros