Summary of methods to achieve text alignment in HTML5 Canvas_html5 tutorial skills

Align textAlign horizontally

JavaScript CodeCopy content to clipboard

1. context.textAlign="center|end|left|right|start";

The values ​​and meanings of each are as follows.

值	描述
start	默认。文本在指定的位置开始。
end	文本在指定的位置结束。
center	文本的中心被放置在指定的位置。
left	文本左对齐，
right	文本右对齐。

Let’s use an example to intuitively feel it.

JavaScript CodeCopy content to clipboard

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

  

  

Run result:

Vertically align textBaseline

JavaScript CodeCopy content to clipboard

1. context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";

The values ​​and meanings of each are as follows.

值	描述
alphabetic	默认。文本基线是普通的字母基线。
top	文本基线是em方框的顶端。
hanging	文本基线是悬挂基线。
middle	文本基线是em方框的正中。
ideographic	文本基线是表意基线。
bottom	文本基线是em方框的底端。

First, let’s take a look at the positions represented by each baseline through a picture.

Let’s use an example to intuitively feel it.

JavaScript CodeCopy content to clipboard

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> </span><span class="comment">//Draw a blue line at position y=300 </span><span> </span> </li> <li> <span> context.strokeStyle=</span><span class="string">"blue"</span><span>; </span> </li> <li class="alt"> <span> context.moveTo(0,300); </span> </li> <li> <span> context.lineTo(800,300); </span> </li> <li class="alt"> <span> context.stroke(); </span> </li> <li> <span> </span> </li> <li class="alt"> <span> context.fillStyle = </span><span class="string">"#00AAAA"</span><span>; </span> </li> <li> <span> context.font=</span><span class="string">"20px Arial"</span><span>; </span> </li> <li class="alt"> <span> </span> </li> <li> <span> </span><span class="comment">//Place each word at y=300 with a different textBaseline value </span><span> </span> </li> <li class="alt"> <span> context.textBaseline=</span><span class="string">"top"</span><span>; </span> </li> <li> <span> context.fillText(</span><span class="string">"Top"</span><span>,150,300); </span> </li> <li class="alt"> <span> context.textBaseline=</span><span class="string">"bottom"</span><span>; </span> </li> <li> <span> context.fillText(</span><span class="string">"Bottom"</span><span>,250,300); </span> </li> <li class="alt"> <span> context.textBaseline=</span><span class="string">"middle"</span><span>; </span> </li> <li> <span> context.fillText(</span><span class="string">"Middle"</span><span>,350,300); </span> </li> <li class="alt"> <span> context.textBaseline=</span><span class="string">"alphabetic"</span><span>; </span> </li> <li> <span> context.fillText(</span><span class="string">"Alphabetic"</span><span>,450,300); </span> </li> <li class="alt"> <span> context.textBaseline=</span><span class="string">"hanging"</span><span>; </span> </li> <li> <span> context.fillText(</span><span class="string">"Hanging"</span><span>,550,300); </span> </li> <li class="alt"> <span> }; </span> </li> <li> <span></script>