Gráficos HTML Canvas
Tutorial HTML » Gráficos HTML Canvas
¿Qué es Canvas?
El elemento de lienzo HTML5 se puede utilizar para dibujar gráficos en la página web a través de JavaScript. El lienzo fue introducido originalmente por Apple para los widgets del tablero de Mac OS y para potenciar los gráficos en el navegador web Safari. Más tarde fue adoptado por Firefox, Google Chrome y Opera. Ahora, el lienzo es parte de la nueva especificación HTML5 para tecnologías web de próxima generación.
Por defecto, el elemento <canvas> tiene 300px de ancho y 150px de alto sin borde ni contenido. Sin embargo, el ancho y el alto personalizados se pueden definir usando la propiedad de alto y ancho de CSS, mientras que el borde se puede aplicar usando la propiedad de borde de CSS.
HTML Canvas: Soporte del navegador
| Element |  Chrome |
 IE |
 Firefox |
 Opera |
 Safari |
| <canvas> | 4.0 | 9.0 | 2.0 | 9.0 | 3.1 |
Ejemplos de lienzo
Un lienzo es un área rectangular en una página HTML. De forma predeterminada, un lienzo no tiene bordes ni contenido.
Usando la propiedad de ancho
Si la propiedad de ancho de CSS se establece en 100%, la imagen responderá y se escalará hacia arriba y hacia abajo:
El diseño web receptivo se trata de usar HTML y CSS para cambiar el tamaño, ocultar, reducir o ampliar automáticamente un sitio web, para que se vea bien en todos los dispositivos (computadoras de escritorio, tabletas y teléfonos):
<!DOCTYPE html>
<html>
<body>
<p>
<canvas id="myCanvas" width="350" height="200" style="border:3px solid #F00;">
Your browser does not support the HTML canvas tag.
</canvas>
</p>
<p>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
</p>
<p>
<canvas id="myCanvas" width="300" height="100" style="border:3px solid #03C;">
Your browser does not support the HTML canvas tag.
</canvas>
</p>
</body>
</html>
Canvas Agregar un JavaScript Ejemplos - ejemplos
Después de crear el área de lienzo rectangular, debe agregar un JavaScript para hacer el dibujo.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:2px solid #F00;">
Your browser does not support the HTML canvas tag.</canvas><script>
</body>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</html>
Dibuja un circulo
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:3px solid #F00;">
Your browser does not support the HTML canvas tag.</canvas><script>
</body>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</html>
Relleno de colores dentro de formas de lienzo: ejemplo completo
También puede rellenar el color dentro de las formas del lienzo utilizando el método fillStyle ().
El siguiente ejemplo le mostrará cómo rellenar un color sólido dentro de una forma rectangular.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Filling Color inside a Rectangle on the Canvas</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.rect(50, 50, 200, 100);
context.fillStyle = "#FB8B89";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
Etiquetas: Gráficos HTML Canvas, Dibujo de lienzo HTML, cómo usar múltiples lienzos en html5, histograma de lienzo html, tela de lona, tutorial de lienzo html, crear un gráfico de barras con lienzo html5 y javascript, tutoriales de lienzo, cómo dibujar un gráfico en lienzo html, lienzo de gráfico circular
Gráficos HTML Canvas - html.es
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.