1.7 处理文本

几乎所有的应用，都需要某种类型的文本，来跟用户进行有效沟通。本节将通过一个乐观的问候，向你展示如何绘制简单文本。

绘制步骤

按照以下步骤在画布上绘制文本：

1. 定义2D画布上下文，并设置文本属性：

window.onload  = function(){
  var canvas  = document.getElementById("myCanvas");
  var context  = canvas.getContext("2d");
  context.font  = "40pt Calibri"; 
  context.fillStyle  = "black";

2. 在水平和垂直方向上对齐文本，并绘制到画布：

  context.textAlign  = "center";  // 水平居中
  context.textBaseline  = "middle"; // 垂直居中
  context.fillText("Hello World!", canvas.width  /  2,  120);
};

3. 在HTML文档的body部分嵌入canvas标签：

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

工作原理

要在HTML5的画布中绘制文本，我们可以通过font属性定义文本的字体和大小，通过fillStyle属性定义文本的颜色，通过textAlign属性定义文本的水平对齐方式，通过textBaseline属性定义文本的垂直对齐方式。textAlign属性可以被设置为left（左对齐）, center（居中对齐）, 或 right（右对齐）。textBaseline属性可以被设置为top（顶端对齐）, hanging（悬挂基线对齐）, middle（居中对齐）, alphabetic（字母基线对齐）, ideographic（表意基线对齐）, 或 bottom（底部对齐）。

了解更多

除了fillText()之外，HTML5的画布API也支持strokeText()方法：

context.strokeText("Hello World!", x, y);

该方法是用指定颜色对文本进行描边，而不是填充。如果既要对文字进行描边，也要进行填充，可以同时调用fillText()和strokeText()方法。为了能够正确渲染文本描边时的边框粗细，先调用fillText()方法，再调用strokeText()方法，是一个好习惯。

相关参考

• 使用阴影绘制3D文本
• 第4章 创建镜像变形
• 第4章 绘制一个简单的logo并随机定位、旋转、缩放