Text horizontal ausrichten
JavaScript-CodeInhalt in die Zwischenablage kopieren
-
context.textAlign="center|end|left|right|start"
Die Werte und Bedeutungen jedes einzelnen sind wie folgt.
| 值 |
描述 |
| start |
默认。文本在指定的位置开始。 |
| end |
文本在指定的位置结束。 |
| center |
文本的中心被放置在指定的位置。 |
| left |
文本左对齐， |
| right |
文本右对齐。 |
Lassen Sie uns ein Beispiel verwenden, um es intuitiv zu spüren.
JavaScript-CodeInhalt in die Zwischenablage kopieren
-
-
"zh">
-
-
"UTF-8">
-
textAlign
-
-
-
-
"canvas-warp">
-
-
你的浏览器居然不支持Canvas？！赶快换一个吧！！
-
-
-
-
<script> </span> </li>
<li class="alt">
<span> window.onload = </span><span class="keyword">Funktion</span><span>(){ </span> </li>
<li>
<span> </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>); </span> </li>
<li class="alt">
<span> canvas.width = 800; </span> </li>
<li>
<span> canvas.height = 600; </span> </li>
<li class="alt">
<span> </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>); </span> </li>
<li>
<span> context.fillStyle = </span><span class="string">"#FFF"</span><span>; </span> </li>
<li class="alt">
<span> context.fillRect(0,0,800,600); </span> </li>
<li>
<span> </span> </li>
<li class="alt">
<span> </span><span class="comment">// 在位置 400 创建蓝线 </span><span> </span> </li>
<li>
<span> context.strokeStyle=</span><span class="string">"blue"</span><span>; </span> </li>
<li class="alt">
<span> context.moveTo(400,100); </span> </li>
<li>
<span> context.lineTo(400,500); </span> </li>
<li class="alt">
<span> context.Stroke(); </span> </li>
<li>
<span> </span> </li>
<li class="alt">
<span> </span> </li>
<li>
<span> context.fillStyle = </span><span class="string">"#000"</span><span>; </span> </li>
<li class="alt">
<span> context.font=</span><span class="string">"50px Arial"</span><span>; </span> </li>
<li>
<span> </span> </li>
<li class="alt">
<span> </span><span class="comment">// 显示不同的 textAlign 值 </span><span> </span> </li>
<li>
<span> context.textAlign=</span><span class="string">"start"</span><span>; </span> </li>
<li class="alt">
<span> context.fillText(</span><span class="string">"textAlign=start"</span><span>, 400, 120); </span> </li>
<li>
<span> context.textAlign=</span><span class="string">"end"</span><span>; </span> </li>
<li class="alt">
<span> context.fillText(</span><span class="string">"textAlign=end"</span><span>, 400, 200); </span> </li>
<li>
<span> context.textAlign=</span><span class="string">"left"</span><span>; </span> </li>
<li class="alt">
<span> context.fillText(</span><span class="string">"textAlign=left"</span><span>, 400, 280); </span> </li>
<li>
<span> context.textAlign=</span><span class="string">"center"</span><span>; </span> </li>
<li class="alt">
<span> context.fillText(</span><span class="string">"textAlign=center"</span><span>, 400, 360); </span> </li>
<li>
<span> context.textAlign=</span><span class="string">"right"</span><span>; </span> </li>
<li class="alt">
<span> context.fillText(</span><span class="string">"textAlign=right"</span><span>, 400, 480); </span> </li>
<li>
<span> }; </span> </li>
<li class="alt">
<span></script>
-
-
Laufergebnis:
Textgrundlinie vertikal ausrichten
JavaScript-CodeInhalt in die Zwischenablage kopieren
-
context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
Die Werte und Bedeutungen jedes einzelnen sind wie folgt.
| 值 |
描述 |
| alphabetic |
默认。文本基线是普通的字母基线。 |
| top |
文本基线是em方框的顶端。 |
| hanging |
文本基线是悬挂基线。 |
| middle |
文本基线是em方框的正中。 |
| ideographic |
文本基线是表意基线。 |
| bottom |
文本基线是em方框的底端。 |
Lassen Sie uns zunächst anhand eines Bildes einen Blick auf die Positionen werfen, die von jeder Grundlinie dargestellt werden.
Lassen Sie uns ein Beispiel verwenden, um es intuitiv zu spüren.
JavaScript-CodeInhalt in die Zwischenablage kopieren
-
-
"zh">
-
-
"UTF-8">
-
textBaseline
-
-
-
-
"canvas-warp">
-
-
你的浏览器居然不支持Canvas？！赶快换一个吧！！
-
-
-
-
<script> </span> </li>
<li class="alt">
<span> window.onload = </span><span class="keyword">function</span><span>(){ </span> </li>
<li>
<span> </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>); </span> </li>
<li class="alt">
<span>canvas.width = 800; </span> </li>
<li>
<span>canvas.height = 600; </span> </li>
<li class="alt">
<span> </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span> </span> </li>
<li>
<span> context.fillStyle = </span><span class="string">"#FFF"</span><span> </span> </li>
<li class="alt"><span> context.fillRect(0,0,800,600);
</span></li> <li> <span>
</span>
</li> <li class="alt">
<span>//Zeichne eine blaue Linie an der Position y=300 </span><span class="comment"> </span> <span>
</span>
</li> context.StrokeStyle=<li>
<span>"blue"</span><span class="string">;
</span><span> context.moveTo(0,300); </span> </li>
<li class="alt">
<span> context.lineTo(800,300); </span> </li>
<li>
<span> context.Stroke(); </span> </li>
<li class="alt">
<span> </span> </li>
<li><span> context.fillStyle = </span></li>"#00AAAA"<li class="alt">
<span> </span> <span class="string">
</span><span> context.font=</span>
</li>"20px Arial"<li>
<span> </span> <span class="string">
</span><span> </span> </li>
<li class="alt"><span> </span></li>//Platzieren Sie jedes Wort bei y=300 mit einem anderen textBaseline-Wert <li>
<span> </span> <span class="comment">
</span><span> context.textBaseline=</span>
</li>"top"<li class="alt">
<span>;
</span><span class="string"> context.fillText(</span><span>"Top"</span>
</li>,150,300);
<li>
<span> context.textBaseline=</span><span class="string">"bottom"</span><span> </span> </li>
<li class="alt">
<span> context.fillText(</span><span class="string">"Bottom"</span><span>,250,300);
</span>
</li> context.textBaseline=<li>
<span>"middle"</span><span class="string"> </span> <span>
</span>
</li> context.fillText(<li class="alt">
<span>"Middle"</span><span class="string">,350,300);
</span><span> context.textBaseline=</span>
</li>"alphabetisch"<li>
<span> </span> <span class="string">
</span><span> context.fillText(</span>
</li>"Alphabetisch"<li class="alt">
<span>,450,300);
</span><span class="string"> context.textBaseline=</span><span>"hanging"</span>
</li> <li> <span>
</span><span class="string"> context.fillText(</span><span>"Hängend"</span>
</li>,550,300; <li class="alt"> <span>
</span><span class="string"> }; </span> <span>
</span>
</li></script>
-
-
-
Laufergebnis:
Konvertieren Sie Text in einen numerischen Wert
Was sind die Produktionsmethoden der HTML5-Animationsproduktion?
Der Unterschied zwischen HTML und HTML5
So löschen Sie Mongodb vollständig, wenn die Installation fehlschlägt
Handy-Bildschirm tft
So fügen Sie Bilder in CSS ein
Java behält zwei Dezimalstellen bei
Anhand welcher Dateitypen können Sie diese identifizieren?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
