Dibujar texto en Canvas de HTML5 usando fillText y strokeText
Siguiendo con los tutoriales sobre el elemento canvas de HTML5 en este post vamos a ver cómo escribir texto sobre el canvas, o mejor dicho, dibujar texto sobre el canvas.
Vamos a personalizar la fuente y el color, así como las coordenadas en donde el texto comienza.
Los métodos que veremos son strokeText
y fillText
.
Estas funciones tienen la misma sintaxis, y reciben los siguientes argumentos en el orden que aparecen:
La diferencia entre strokeText
y fillText
es que strokeText
dibuja solo el borde del texto, y fillText
lo dibuja relleno.
Para controlar el color del texto que se dibuja sobre el canvas de HTML se establece la propiedad strokeStyle
y fillStyle
en el nombre de un color o su valor hexadecimal, entre otros.
La fuente se establece con font, y es algo como: “20px Arial”
Veamos el código a continuación, el cual escribe texto sobre el canvas.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Texto en Canvas</title>
</head>
<body>
<h1>Texto en Canvas usando JavaScript</h1>
<a href="//parzibyte.me/blog">By Parzibyte</a>
<br/>
<canvas id="canvas"></canvas>
<script src="script.js">
</script>
</body>
</html>
/**
* Ejercicios con Canvas y JavaScript: texto
*
* https://parzibyte.me/blog
*/const ALTURA_CANVAS = 200,
ANCHURA_CANVAS = 400;
// Obtener el elemento del DOM
const canvas = document.querySelector("#canvas");
canvas.width = ANCHURA_CANVAS;
canvas.height = ALTURA_CANVAS;
// Del canvas, obtener el contexto para poder dibujar
const contexto = canvas.getContext("2d");
// Establecer tamaño y fuente
contexto.font = "30px Verdana";
// Sintaxis: text, x, y
contexto.strokeText("strokeText", 0, 50);
contexto.fillText("fillText", 0, 100);
// Se puede cambiar durante la ejecución
contexto.strokeStyle = "red";
contexto.strokeText("strokeText rojo", 170, 50);
contexto.font = "20px Courier New";
contexto.fillStyle = "yellow";
contexto.fillText("fillText amarillo", 120, 100);
El resultado es el siguiente:
En este post te quiero compartir un código de C++ para listar y cancelar trabajos…
Gracias a WebAssembly podemos ejecutar código de otros lenguajes de programación desde el navegador web…
Revisando y buscando maneras de imprimir un PDF desde la línea de comandos me encontré…
Esta semana estuve recreando la API del plugin para impresoras térmicas en Android (HTTP a…
Hoy te enseñaré a extraer la cadena base64 de una clave PEM usando una función…
Encender un foco con un Bot de Telegram es posible usando una tarjeta como la…
Esta web usa cookies.