Canvas HTML5
¿Que es Canvas HTML?
El elemento <canvas>
es usado para dibujar gráficos, sobre la marcha, a través JavaScript. El elemento <canvas>
es solo el contenedor para gráficos. Debe usarse JavaScript para dibujar los gráficos. Un lienzo (canvas) tiene muchos métodos para dibujar trazados, cajas, círculos, texto y agregar imágenes.
Ejemplos Canvas
Un canvas es una área rectangular en una página HTML. Por defecto, un canvas no tiene borde y ni contenido. Siempre se especifica el atributo id (para referirlo a un script), y los atributos width y height para definir el tamaño del canvas.
<canvas id="micanvas" width="200" height="100" style="border: thin solid gray;">
</canvas>
Dibujar una línea:
<script>
var c = document.getElementById("micanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroken();
</script>
Dibujar un círculo:
<script>
var c = document.getElementById("micanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95.50,40,0,2 * Math.PI);
ctx.stroke();
</script>
Dibujar un Texto:
<script>
var c = document.getElementById("micanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hola mundo",10,50);
</script>
Dibujar un Texto Trazado:
<script>
var c = document.getElementById("micanvas");
var ctx = getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hola mundo",10,50);
</script>
Dibujar un Degradado Círcular:
<script>
var c = document.getElementById("micanvas");
var ctx = c.getContex("2d");
// Crear el degrado
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Llenar degrado
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>
Dibujar una Imagen:
<script>
var c = document.getElementById("micanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
</script>