Zusammenfassung der Methoden zum Erreichen der Textausrichtung in HTML5 Canvas_html5-Tutorial-Fähigkeiten

Text horizontal ausrichten

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. 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

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.        
7.   
8.   
9. "canvas-warp">   
10.     "canvas">   
11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.        

  

  

<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

1. 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

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.        
7.   
8.   
9. "canvas-warp">   
10.     "canvas">   
11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.        

<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: