La propiedad HTML canvas textBaseline se utiliza para establecer o devolver la línea de base del texto actual. Esta propiedad se utiliza para establecer la alineación de la línea de base de la fuente en HTML. Básicamente, esta propiedad se usa para controlar la alineación vertical del texto para dibujar en el lienzo.
Sintaxis:
context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
Valores de propiedad:
- alfabético: este es el valor de propiedad predeterminado. Especifica que la línea base del texto es la línea base alfabética normal.
- top: esta propiedad se usa para especificar que la línea de base del texto está en la parte superior del cuadrado em.
- Colgante: esta propiedad se utiliza para especificar que la línea base del texto es la línea base colgante.
- medio: esta propiedad se usa para especificar que la línea de base del texto es el medio del cuadrado em.
- ideográfica: esta propiedad se utiliza para especificar que la línea de base del texto es la línea de base ideográfica.
- bottom: esta propiedad se usa para especificar que la línea de base del texto es la parte inferior del cuadro delimitador.
Ejemplo 1: este ejemplo muestra las propiedades superior, media e ideográfica.
<!DOCTYPE html>
<html>
<head>
<title>
HTML canvas textBaseline Property
</title>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>HTML canvas textBaseline Property</h2>
<canvas id="GFG" width="300" height="300">
</canvas>
<script>
var doc_id = document.getElementById('GFG');
var context = doc_id.getContext('2d');
var b = ['top', 'middle', 'ideographic'];
context.font = '20px Arial';
context.strokeStyle = 'green';
b.forEach(function (b, index) {
context.textBaseline = b;
var y = 60 + index * 60;
context.beginPath();
context.moveTo(0, y + 1);
context.lineTo(550, y + 1);
context.stroke();
context.fillText('GeeksforGeeks (' + b + ')', 0, y);
});
</script>
</center>
</body>
</html>
Ejemplo 2: este ejemplo muestra las propiedades colgantes, alfabéticas y de fondo.
<!DOCTYPE html>
<html>
<head>
<title>
HTML canvas textBaseline Property
</title>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>HTML canvas textBaseline Property</h2>
<canvas id="GFG" width="300" height="300">
</canvas>
<script>
var doc_id = document.getElementById('GFG');
var context = doc_id.getContext('2d');
var b = ['hanging', 'alphabetic', 'bottom'];
context.font = '20px Arial';
context.strokeStyle = 'green';
b.forEach(function (b, index) {
context.textBaseline = b;
var y = 60 + index * 60;
context.beginPath();
context.moveTo(0, y + 1);
context.lineTo(550, y + 1);
context.stroke();
context.fillText('GeeksforGeeks (' + b + ')', 0, y);
});
</script>
</center>
</body>
</html>
Navegadores compatibles: los navegadores compatibles con HTML canvas textBaseline Property se enumeran a continuación:
- Google Chrome
- Internet Explorer 9.0
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por IshwarGupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA