HTML 参考手册

HTML 标签大全

HTML canvas textBaseline 属性

textBaseline 是 Canvas 2D API 描述绘制文本时，当前文本基线的属性。

在线示例

在y = 100处画一条红线，然后将每个单词在y = 100处放置不同的textBaseline值：

Beispiel

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8>
<title>HTML　canvas　textBaseline-Eigenschaft verwenden-Grund教程(oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="400"　height="200"　style="border:1px　solide　#d3d3d3>
Ihr Browser unterstützt keine　HTML5　canvas-Tag.
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
//in Y　=　100 zeichnet eine Rote Linie
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px　Arial"
//Jeder in y　=　10Die Wörter mit 0 haben unterschiedliche textbaseline-Werte
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>

Testen Sie, ob ‹/›

Browserkompatibilität

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome und Safari unterstützen textBaseline Eigenschaft.

Note:Die textBaseline-Eigenschaft hat in verschiedenen Browsern unterschiedliche Effekte, insbesondere wenn "hanging" oder "ideographic" verwendet wird.

Note:Internet Explorer 8 And earlier versions do not support the <canvas> element.

Definition and Usage

The textBaseline property sets or returns the current text baseline used when drawing text.

The following illustration demonstrates the various baselines supported by the textBaseline attribute:

Note:fillText() andstrokeText() The method uses the specified textBaseline value when positioning text on the canvas.

Default Value:	alphabetic
JavaScript Syntax:	Context.textBaseline="alphabetic\|top\|hanging\|middle\|ideographic\|bottom";

Attribute Value

Value	Description
alphabetic	Default. The text baseline is the standard letter baseline.
top	The text baseline is at the top of the em box.
hanging	The text baseline is the hanging baseline.
middle	The text baseline is in the middle of the em box.
ideographic	The text baseline is the ideographic baseline.
bottom	The text baseline is at the bottom of the em box.

HTML canvas Reference Manual

HTML: <template> Tag