HTML5 Canvas实现文本对齐的方法总结

水平对齐textAlign

JavaScript Code 复制内容到剪贴板

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

其中各值及意义如下表。

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

我们通过一个例子来直观的感受一下。

JavaScript Code 复制内容到剪贴板

"zh">

    "UTF-8">
    textAlign
       </span> </li> 
    <li class="alt"><span>        body { background: url(</span><span class="string">"./images/bg3.jpg"</span><span>) repeat; } </span><span class="preprocessor"></span>  </li> 
    <li><span><span class="preprocessor">        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; } </span><span>  </span></span> </li> 
    <li class="alt"><span>


"canvas-warp">
    "canvas">
        你的浏览器居然不支持Canvas？！赶快换一个吧！！

  

  

  

  

  

运行结果：

垂直对齐textBaseline

JavaScript Code 复制内容到剪贴板

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

其中各值及意义如下表。

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

首先咱们通过一个图来看一下各个基线代表的位置。

我们通过一个例子来直观的感受一下。

JavaScript Code 复制内容到剪贴板

"zh">

    "UTF-8">
    textBaseline
       </span> </li> 
    <li class="alt"><span>        body { background: url(</span><span class="string">"./images/bg3.jpg"</span><span>) repeat; } </span><span class="preprocessor"></span>  </li> 
    <li><span><span class="preprocessor">        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; } </span><span>  </span></span> </li> 
    <li class="alt"><span>


"canvas-warp">
    "canvas">
        你的浏览器居然不支持Canvas？！赶快换一个吧！！

  

  

  

  

  

运行结果：