16.5.5.1设置文本基线

  确定文本出现在什么地方的坐标位置叫作基线(baseline)。默认情况下,文本的左下角与基线点对齐,以便文本出现在基线点的右上方。

  要修改文本相对于基线的位置,可以更改textBaseline属性。该属性的默认值是”bottom”,但是,也可以将其设置为”top”或”middle”。图16-6展示了文本是如何针对这些选项而对齐的,相对于传递给fillText的基线点(显示为一个红点)。

《javascript-少儿编程》第16章开发贪吃蛇游戏第1部分设置文本基线

图16-6 修改textBaseline的效果

  例如,要把文本放到基线之下,输入:


ctx.textBaseline = "top";
ctx.fillText("Hello world!", 50, 50);


  现在,当你调用fillText的时候,文本将位于点(50,50)的下方,如图16-7所示。

《javascript-少儿编程》第16章开发贪吃蛇游戏第1部分设置文本基线

图16-7字符串”Hello world!”,其textBaseline设置为”top”

  类似的,要修改文本相对于基线点的水平位置,可以将textAlign属性设置为”left”、”center”或”right”。图16-8显示了其结果。

《javascript-少儿编程》第16章开发贪吃蛇游戏第1部分设置文本基线

图16-8 修改textAlign的结果


本站内容未经许可,禁止任何网站及个人进行转载。