Dibujo de graficos en HTML5

La etiqueta CANVAS es usada para contener graficos en paginas web. Deberas usar JavaScript para hacer los graficos. La mayoria de navegadores ya esta soportado esta etiqueta.

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

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

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

1. Line

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

2. Circle

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

3. Text

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 gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

//Rellena gradient
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. Ejemplos