Podemos incluir texto en el lienzo de Canvas, vamos a verlo sobre este ejemplo:
<!doctype html>
<html lang="es">
<head>
<title>Ejemplo 8 Canvas </title>
<script type="text/javascript">
function dibujarCanvas(){
var canvas = document.getElementById('miCanvas');
var contexto = canvas.getContext('2d');
// Texto
contexto.fillStyle = 'green';
contexto.font = "30px Verdana";
contexto.fillText(" Canvas",10,50);
contexto.strokeStyle = 'red';
contexto.lineWidth = 1;
contexto.font = "40px Arial";
contexto.strokeText(" aulaClic",130,50);
}
</script>
</head>
<body onLoad="dibujarCanvas();">
<canvas id="miCanvas" width="290" height="100">Su navegador no soporta Canvas.</canvas>
</body>
</html>
El resultado es el siguiente:
Mediante las propiedades que ya hemos visto, fillStyle, strokeStyle y lineWidth definimos los colores y ancho de línea que se van a utilizar en el texto. Tenemos tres funciones nuevas, font, fillText, y strokeText que vamos a explicar a continuación.
font = "tamaño fuente" Aquí definimos el tamaño de la fuente, la fuente y también se pueden añadir otras características de la fuente con el formato de CSS. En nuestro ejemplo tenemos font = "30px Verdana" .
fillText("texto", x,y [,maxWidth]) Dibuja el "texto" indicado en la posición (x,y), el texto se rellena de acuerdo con fillStyle y font. Opcionalmente se puede definir la anchura máxima que podrá ocupar el texto. En nuestro ejemplo fillText(" Canvas",10,50); dibuja el texto " Canvas" en color verde, en x=20, y=50, con la fuente Verdana y un tamaño de 30px.
strokeText("texto", x,y [,maxWidth]) Dibuja el "texto" indicado en la posición (x,y), el texto se dibuja de acuerdo con strokeStyle, lineWidth y font. Opcionalmente se puede definir la anchura máxima que podrá ocupar el texto. En nuestro ejemplo strokeText(" aulaClic",130,50); dibuja el texto " Canvas" con un contorno de 1 px. en color rojo en x=20, y=50, con la fuente Arial y un tamaño de 40px..
También podemos usar las propiedades textAlign, textBaseline y direction para alinear de distintas formas el texto, estas propiedades tiene el mismo uso que en CSS.
Para practicar lo aprendido realiza el ejercicio Gráficos Canvas
Más funciones y Frameworks
En este curso de HTML no podemos extendernos más, pero Canvas tiene muchas más cosas. Vamos a citar algunas de ellas.
Con Canvas se puede detectar la posición del ratón para interactuar con el usuario.
Al dibujar una forma después de otra se puede especificar si la va a tapar, si va a quedar debajo, si se va a transparentar, si se va a producir una intersección, etc.
Se pueden definir formas que actúen como máscaras.
Para realizar animaciones existen las funciones limpiar, salvar y restaurar el estado del Canvas.
Hay funciones para transformar el Canvas, trasladarlo, rotarlo y escalarlo.
Para saber más sobre los temas de esta unidad ...
En las siguientes páginas web están explicadas todas estas funciones:
- Canvas Tutorial. Mozilla.org
- Manual de Canvas del HTML 5.
Los frameworks son librerías con multitud de funciones predefinidas que ayudan a trabajar más eficientemente con Canvas, liberando al programador de realizar muchas tareas rutinarias.
Algunos de los frameworks ultizados con Canvas son los siguientes:
- EaselJS
- bHive
- Paper.js
- three.js
| Ejercicio propuesto de la Unidad 15 |
 Prueba evaluativa de la Unidad 15 |
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.