绘制文本

Canvas API中提供了两种绘制文本的方法：

• fillText：绘制文本

  CanvasRenderingContext2D.fillText(text, x, y);
  CanvasRenderingContext2D.fillText(text, x, y, maxWidth);
  

• strokeText：添加空心字

  CanvasRenderingContext2D.strokeText(text, x, y);
  CanvasRenderingContext2D.strokeText(text, x, y, maxWidth);
  

注意：fillText方法不支持文本断行，即所有文本出现在一行内。所以，如果要生成多行文本，只有调用多次fillText方法。 绘制文本的时候还可以为文本添加其他属性：

• font：设置文本的样式
• textAlign：设置文本水平对齐，'start'，'end'，'left'，'right'，'center'
• textBaseline：设置文本垂直对齐，'top'，'hanging'，'middle'，'alphabetic'，'ideographic'，'bottom'

在abstract一节中，我们绘制了一个9*9的空表格，现在我们来为每个表格填充数字以及x与y轴坐标的乘积：

// GridFunny定义与[[36:26:canvas:abstract]]一节中一致
var grid = new GridFunny({
    gridColor: "green",
    fillGrid: function(keyX, keyY, pixelX, pixelY) {
        var paddingX = pixelX / 4,
            paddingY = pixelY / 4;
        if (keyX <= keyY) {
            this.context.fillStyle = "black";
        } else {
            this.context.fillStyle = "blue";
        }
        this.context.font = "20px Arial";
        this.context.fillText(keyX * keyY, this.gridOfX[keyX] + paddingX * 1.5, this.gridOfY[keyY] + paddingY * 2.5);
    }
});
grid.start();

示例代码中使用了GridFunny提供的每个格子的坐标，然后调用fillText方法将坐标的乘积绘制到每个单元表格中。

这里有一个问题，由于记录单元表格的坐标是左上角的，所以在绘制文本的时候，位置并不是我们想要看到的居中，而是会出现在单元表格左上角的外面，如下图所示： 为了解决这个问题我们在绘制文本的时候做了下位置偏移（临时解决方案，这不是好的实现方法，应该考虑一个更为通用的方法）

代码的执行效果如下：