文本

2D 画布的context对象提供了fillText方法和strokeText方法。第二个方法可以用于绘制字母轮廓，但通常情况下我们需要的是fillText方法。该方法使用当前的fillColor来填充特定文字的轮廓。

<canvas></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");
  cx.font = "28px Georgia";
  cx.fillStyle = "fuchsia";
  cx.fillText("I can draw text, too!", 10, 50);
</script>

你可以通过font属性来设定文字的大小，样式和字体。本例给出了一个字体的大小和字体族名称。也可以添加italic或者bold来选择样式。

传递给fillText和strokeText的后两个参数用于指定绘制文字的位置。默认情况下，这个位置指定了文字的字符基线（baseline）的起始位置，我们可以将其假想为字符所站立的位置，基线不考虑j或p字母中那些向下突出的部分。你可以设置textAlign属性（end或center）来改变起始点的水平位置，也可以设置textBaseline属性（top、middle或bottom）来设置基线的竖直位置。

在本章末尾的练习中，我们会回顾饼状图，并解决给饼状图分片标注的问题。