Existen varios métodos para curvar texto en tecnologías web. Las formas más sencillas son mediante el uso de complementos jQuery y SVG, pero no lo explicaremos aquí, nos ceñiremos a la pregunta y aclararemos cómo curvar texto usando CSS3 y lienzo. Empecemos.
Curvar texto usando CSS3: este método es extremadamente agotador para curvar texto largo porque tiene que aplicar el posicionamiento y la alineación adecuados a cada carácter del texto por separado. Pero, para texto pequeño, simplemente hace el trabajo. Aquí solo escribimos los caracteres de un texto uno por uno y comenzamos a aplicar las propiedades de transformación CSS para hacer que todo el texto se vea curvo (o con forma de arco). Sin embargo, una ventaja de este método es que puede seleccionar el texto e incluso copiar y pegar.
Ejemplo 1:
<!DOCTYPE html>
<html lang="en">
<head>
<!--Style to transform text in an arc -->
<style type=text/css>
/* Apply the translate and rotate transformation
for our text to look curved */
.G1 {
transform: translate(20px, 85px) rotate(-30deg);
}
.e1 {
transform: translate(13px, 60px) rotate(-25deg);
}
.e2 {
transform: translate(6px, 40px) rotate(-20deg);
}
.k1 {
transform: translate(3px, 23px) rotate(-15deg);
}
.s1 {
transform: translate(2px, 14px) rotate(-10deg);
}
.f {
transform: translate(1px, 8px) rotate(-5deg);
}
.o {
transform: translate(0px, 5px) rotate(0deg);
}
.r {
transform: translate(-1px, 8px) rotate(5deg);
}
.G2 {
transform: translate(-2px, 14px) rotate(10deg);
}
.e3 {
transform: translate(-3px, 25px) rotate(15deg);
}
.e4 {
transform: translate(-6px, 40px) rotate(20deg);
}
.k2 {
transform: translate(-14px, 60px) rotate(25deg);
}
.s2 {
transform: translate(-20px, 80px) rotate(30deg);
}
/* An inline-block element is placed as an inline
element (on the same line as adjacent content),
but it behaves like a block element */
span {
display: inline-block;
}
</style>
</head>
<body>
<div style="text-align: center; padding-top: 250px;
font-size: 55px; color: green;">
<!-- Declare all the characters of text
one-by-one, inside span tags -->
<span class="G1">G</span>
<span class="e1">e</span>
<span class="e2">e</span>
<span class="k1">k</span>
<span class="s1">s</span>
<span class="f">f</span>
<span class="o">o</span>
<span class="r">r</span>
<span class="G2">G</span>
<span class="e3">e</span>
<span class="e4">e</span>
<span class="k2">k</span>
<span class="s2">s</span>
</div>
</body>
</html>
Producción:
Texto curvo con Canvas: el elemento canvas es parte de HTML5 y permite la representación dinámica y programable de formas 2D e imágenes de mapa de bits. Este es un método relativamente más fácil para curvar texto utilizando un poco de JavaScript para manipular el elemento del lienzo y diseñarlo. Este método hace uso de las matemáticas básicas de la escuela secundaria para rotar y traducir el contexto del lienzo dentro de un ciclo y llenarlo con las letras del texto una por una. El radio del arco y el ángulo se pueden ajustar según la forma y el tamaño del arco. Este método producirá una instancia no seleccionable del texto.
Ejemplo 2:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Curve text using Canvas</title>
</head>
<body>
<!-- Creating a canvas element in HTML-->
<canvas id="canv" width="600" height="250"></canvas>
<script>
/*The window.onload function will run as
soon as the window loads in the browser */
window.onload = function () {
/* This method returns the html element that
has the ID attribute with the specified
value. */
let canvas = document.getElementById("canv");
/* This method returns a drawing context
on the canvas, or null if the context
identified is not supported. */
let context = canvas.getContext("2d");
/* It will change the style and appearance
of the text to make it look more geeky. */
context.font = "50px serif";
context.fillStyle = "green";
context.textAlign = "center";
let string = "GeeksforGeeks";
let angle = Math.PI * 0.6; // in radians
let radius = 200;
context.translate(300, 300);
context.rotate(-1 * angle / 2);
for (let i = 0; i < string.length; i++) {
/* It is worth noting that we are not
rotating the text,here the whole
context is being rotated and
translated, and the letters are just
filled in it. */
context.rotate(angle / string.length);
context.save();
context.translate(0, -1 * radius);
context.fillText(string[i], 0, 0);
context.restore();
}
};
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por equbalzeeshan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA