Texto en canvas es uno de los métodos que se emplean en la api de html5, que nos ayuda a tener una mejor presentación en nuestros blogs o páginas web. Para poder trabajar con los textos de html5 se utiliza el siguiente código,
fillStyle= "color" ;
font = 'italic 40pt Calibri' ;
textAlign = 'left';
fillText('Hola Mundo!', x, y);
lineWidth = Ancho del borde o línea de texto;
strokeStyle = 'Color del borde’;
strokeText('Hola Mundo!', x, y);
fillstyle se utiliza para el color de nuestro fondo de nuestros texto; font hace referencia a la fuente del texto; textAlign alinea nuestro texto hacia el center, right y left; fillText, muestra el texto en la pantalla, X y Y son nuestras coordenadas; lineWidth es el ancho del trazo del borde; strokeStyle, es el color del trazo del borde ; y strokeText, muestra el trazo del borde en la pantalla con las coordenadas X y Y. Para ver el funcionamiento de los métodos de texto en canvas, pegamos el siguiente código en nuestro editor de texto:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
background:#1a1a1a;
}
</style>
</head>
<body>
<canvas id="miCanvas" width="700" height="300"></canvas>
<script>
var canvas = document.getElementById('miCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();//Comienzo para pintar
ctx.fillStyle= "white" ;
ctx.font = 'italic 50pt Calibri' ;
ctx.textAlign = 'left';
ctx.fillText('Hola Mundo!', 100, 100);
ctx.lineWidth = 2;
ctx.strokeStyle = '#f7fa00';
ctx.strokeText('Hola Mundo!', 100, 100);
</script>
</body>
</html>
El texto quedaría de la siguiente manera:
Para no dejar tan simple nuestro texto podemos mejorar el texto como se muestra al principio del titulo de este tutorial, la fuente de texto es ThickDeco,
var canvas = document.getElementById('miCanvas');
var context = canvas.getContext('2d');
var x = 50;
var y = 150;
/*Ponemos un fondo con rect*/context.beginPath();//Comienzo para pintar
context.fillStyle="#1a1a1a";
context.rect(0,0,700,300);
context.fill();
/*Las fuente de texto, el color del fondo y borde, tamaño de trazo se declaran en esta parte*/
context.font = '80pt ThickDeco ';
context.lineWidth = 10;
context.strokeStyle = ' #7600fa';
context.fillStyle = 'yellow';
/*Pintamos el fodo del texto color amarrillo y con el borde violeta*/
context.fillText('HTML5', x, y);
context.strokeText('HTML5', x, y);
/*Pintamos un segundo borde de amarillo*/
context.lineWidth = 2;
context.strokeStyle = '#f7fa00';
context.strokeText('HTML5', x, y);
Utilizamos dos trazos de borde para mejorar la apariencia de nuestro texto, la fuente nos ayuda a que se vea con más presentación; los colores se pueden modificar relacionándolo con el fondo del canvas que en este caso utilizamos, que fue el método rect, el tamaño es el mismo que el de la etiqueta canvas y comienza a dibujar desde cero.
No hay comentarios:
Publicar un comentario