HTML5

HTML5 DICIONARIO

Referencias de la pagina http://www.w3schools.com/html/html5_canvas.asp

Resumen

elemento <canvas> se utiliza para dibujar gráficos, sobre la marcha, en una página web.

<!DOCTYPE html>

<html>

Ejemplo de Lienzo

</title>

function cargador()

{

var c=document.getElementById("myCanvas");

<!-- llame a su método getContext () (hay que pasar la cadena "2d" al getContext

(método)): El objeto getContext ("2d") es un objeto incorporado HTML5, con muchas propiedades y métodos para dibujar trazados, cuadros, círculos, texto, imágenes y más. -->

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

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

ctx.font="30px Arial";

ctx.fillText("Hello World",10,50);

ctx.font="30px Arial";

ctx.strokeText("Hello World",10,50);

// Create gradient

var grd=ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Fill with gradient

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

// Create gradient Circular

var grd=ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Fill with gradient

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

//Imagenes

var img=document.getElementById("scream");

ctx.drawImage(img,10,10);

}

</script>

</head>

<h1>Ejemplo de Lienzo</h1>

//etiqueta canvas Atributos width, height

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #000000;">

</canvas>

</body>

</html>