Canvas permite realizar gráficos de todo tipo, desde una línea recta hasta juegos interactivos, también permite manipular imágenes para cambiarles el tono, buscar bordes, aplicaciones de visión artificial, etc. En este artículo veremos sólo una introducción al mundo Canvas.
Vamos a ver un ejemplo sencillo que dibuja un rectángulo gris de 450 x 350 pixels ocupando todo el lienzo o Canvas. Sobre este ejemplo explicaremos los conceptos básicos sobre Canvas.
<!doctype html>
<html lang="es">
<head>
<title>Ejemplo1 Canvas </title>
<script type="text/javascript">
function dibujarCanvas(){
var canvas = document.getElementById('miCanvas');
var contexto = canvas.getContext('2d');
contexto.fillStyle = '#CCCCCC';
contexto.fillRect (0, 0, 450, 350);
}
</script>
</head>
<body onLoad="dibujarCanvas();">
<canvas id="miCanvas" width="450" height="350">Su navegador no soporta Canvas.</canvas> <p>Dibujo con Canvas:</p>
</body>
</html>
Puedes ver el resultado en esta página: ejemplo1, también puedes ejecutar el código anterior y el resto de ejemplos de esta unidad, copiando el código y pegándolo en un editor de HTML, como Brackets, si no dispones de un editor de texto (por ejemplo, si estás viendo este curso desde un dispositivo móvil) puedes probar el código anterior seleccionándolo y pegándolo como se explica en esta página: Probar código desde el navegador.
En el Body del documento HTML se declara el elemento <canvas>:
<canvas id="miCanvas" width="450" height="350">Su navegador no soporta Canvas.</canvas>
Los atributos width y height definen el tamaño del Canvas, es decir, el tamaño de la superficie o lienzo sobre el que dibujaremos.
La posición que ocupe este lienzo del Canvas dentro de la página web vendrá definida por el lugar en el que escribamos el elemento <canvas>, como sucede con cualquier otro elemento de HTML. Por ejemplo, podemos colocarlo dentro de una tabla o dentro de un contenedor <div>.
El elemento <canvas> debe cerrarse con </canvas> , si escribimos un texto entre estas dos etiquetas, se mostrará ese texto en el caso que el navegador no soporte Canvas. En nuestro ejemplo aparecerá el texto "Su navegador no soporta Canvas", también podemos poner una etiqueta <img> con una captura del dibujo que crea el Canvas.
Para poder referenciar al elemento concreto de Canvas en el código Javascript es conveniente darle un identificador, por ejemplo, id="miCanvas".
Una vez hemos creado el elemento Canvas debemos ejecutar el código Javascript que realice los dibujos, esto hay que hacerlo después que el elemento Canvas se haya creado. Una forma de hacerlo es con la propiedad onLoad:
<body onLoad="dibujarCanvas();">
Una vez cargada la página ejecutamos la función dibujarCanvas()
La función que dibuja el Canvas tiene la misma sintaxis que cualquier función Javascript, vamos a ver cada instrucción.
<script type="text/javascript">
function dibujarCanvas(){
var canvas = document.getElementById('miCanvas');
var contexto = canvas.getContext('2d');
contexto.fillStyle = '#CCCCCC;
contexto.fillRect (0, 0, 450, 350);
}
</script>
Lo primero que tenemos que hacer es obtener el nodo DOM mediante la instrucción:
var canvas = document.getElementById('miCanvas');
Le hemos pasado como parámetro el identificador que dimos al elemento Canvas.
A continuación debemos obtener el objeto contexto:
var contexto = canvas.getContext('2d');
Hay dos posibles contextos, "2d" para dibujar en dos dimensiones y "webgl" para dibujar en tres dimensiones. Una vez tenemos el objeto contexto ya podemos utilizar todos las funciones y propiedades que tiene asociados para dibujar.
La propiedad fillStyle define el color de relleno.
La función o método fillRect(x, y, ancho, alto) dibuja un rectángulo en la posición (x,y) de una anchura y altura. La posición se refiera a la esquina superior izquierda del rectángulo.
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.