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.

<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 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. Ejemplos