绘制文本

绘制文本的两个方法

canvas 提供了两种方法来渲染文本:

1. fillText(text, x, y [, maxWidth])

   在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.

2. strokeText(text, x, y [, maxWidth])

   在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.

var ctx;
function draw(){
    var canvas = document.getElementById('tutorial');
    if (!canvas.getContext) return;
    ctx = canvas.getContext("2d");
    ctx.font = "100px sans-serif"
    ctx.fillText("天若有情", 10, 100);
    ctx.strokeText("天若有情", 10, 200)
}
draw();

给文本添加样式

1. font = value

   当前我们用来绘制文本的样式。这个字符串使用和 CSS font属性相同的语法. 默认的字体是 10px sans-serif。

2. textAlign = value

   文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。

3. textBaseline = value

   基线对齐选项，可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。

4. direction = value

   文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。