Manual de referencia HTML

大全 de etiquetas HTML

Atributo textBaseline de HTML canvas

textBaseline es Canvas 2D API describe la propiedad del nivel actual de la línea de texto.

Ejemplo en línea

En y = 100 dibujar una línea roja, luego ubicar cada palabra en y = 100 ubicación de diferentes valores de textBaseline:

Ejemplo

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Uso de la propiedad textBaseline en HTML canvas-Tutoriales básicos(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="4" height="2" style="border:1px sólido #d3d3d3>
Su navegador no admite HTML5　etiqueta canvas.
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
//en Y　=　100 dibuja una línea roja
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px　Arial"
//Cada una en y　=　10Las palabras con 0 tienen diferentes valores de textbaseline
ctx.textBaseline="top";　
ctx.fillText("Top",5,100);　
ctx.textBaseline="bottom";　
ctx.fillText("Bottom",50,100);　
ctx.textBaseline="middle";　
ctx.fillText("Middle",120,100);　
ctx.textBaseline="alphabetic";　
ctx.fillText("Alphabetic",190,100);　
ctx.textBaseline="hanging";　
ctx.fillText("Hanging",290,100);　
</script>
</body>
</html>

Prueba y mira ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome y Safari soportan textBaseline propiedad.

Nota:La propiedad textBaseline tiene diferentes efectos en diferentes navegadores, especialmente cuando se utiliza "hanging" o "ideographic".

Nota:Internet Explorer 8 Las versiones anteriores a la 6 no admiten el elemento <canvas>.

Definición y uso

La propiedad textBaseline establece o devuelve la línea base actual utilizada al dibujar texto.

La siguiente ilustración muestra las diversas líneas base admitidas por la propiedad textBaseline:

Nota:fillText() ystrokeText() El método ubicado en el lienzo utiliza el valor de textBaseline especificado al ubicar texto en el lienzo.

Valor predeterminado:	alphabetic
Sintaxis de JavaScript:	context.textBaseline="alphabetic\|top\|hanging\|middle\|ideographic\|bottom";

Valor del atributo

Valor	Descripción
alphabetic	Predeterminado. La línea base del texto es la línea base común de las letras.
top	La línea base del texto es la cima del cuadro em.
hanging	La línea base del texto es la línea suspendida.
middle	La línea base del texto es el centro del cuadro em.
ideographic	La línea base del texto es la línea basada en ideogramas.
bottom	La línea base del texto es el fondo del cuadro em.

Manual de referencia de canvas HTML

HTML: <template> etiqueta