HTML5画布 – 文本和字体

HTML5的画布(canvas)不仅能够绘制图形和图像，还能在画布上添加文本和字体。在本文中，我们将讨论如何在HTML5画布中添加文本和字体。

绘制文本

在HTML5画布中，可以使用canvas的fillText()或strokeText()方法来绘制文本。这两种方法除了颜色和字形之外，其他参数都是一样的。

// 创建画布对象
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 定义文本的样式
ctx.font = "30px Arial";

// 绘制文本
ctx.fillText("Hello World", 10, 50);
ctx.strokeText("Hello World", 10, 80);

上述代码中，fillText()方法用红色填充文本，strokeText()方法则用绿色线条绘制文本。在默认情况下，文本是黑色的。

fillText()

fillText()方法在画布上填充指定的文本，其语法如下：

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

其中，参数text表示要填充的文本，参数x和y表示文本的起始点，maxWidth为可选参数，表示最大宽度。如果填充的文本超出了maxWidth的宽度，可能会压缩文本。

strokeText()

strokeText()方法用线条绘制指定的文本，其语法与fillText()方法相同。

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

定义字体

与CSS中的字体定义类似，HTML5画布也支持使用不同的字形和字号来绘制文本。

ctx.font = "italic bold 20px Arial";

上述代码中，font属性指定了文本的字体样式，包括字形、字号和字体类型。在HTML5画布中，字形主要有以下几种类型：

normal：常规字形
italic：斜体字形
oblique：倾斜字形

字体类型也可以是Web安全字体：Arial、Comic Sans MS、Courier New、Georgia、Impact、Times New Roman、Trebuchet MS、Verdana。

对齐和基线

当使用fillText()或strokeText()方法绘制文本时，我们可以使用textAlign和textBaseline属性来控制文本的对齐和基线。

textAlign

textAlign属性定义绘制文本时的对齐方式。它的值可以是以下之一：

start：文本在指定的位置开始
end：文本在指定的位置结束
center：文本的中心被放置在指定的位置
left：文本左对齐
right：文本右对齐

ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);

上述代码中，文本将在画布的中心位置绘制。

textBaseline

textBaseline属性定义了在文本垂直对齐时的基线位置。它的值可以是以下之一：

alphabetic：默认值，文本基线是标准字母基线
top：文本基线是 em 方块的顶端
hanging：文本基线是悬挂基线
middle：文本基线是 em 方块的正中
ideographic：文本基线是标准汉字的基线
bottom：文本基线是 em 方块的底端

ctx.textBaseline = "middle";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);

上述代码中，文本将在画布的中心位置绘制。

实例

<!-- HTML5画布 - 文本和字体 -->
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);
</script>

</body>
</html>

结论

HTML5画布不仅支持绘制图形和图像，还支持在画布上添加文本和字体。通过使用fillText()或strokeText()方法，我们可以在画布上添加文本，并使用font、textAlign和textBaseline属性来定义其字体和对齐方式。这些功能使画布成为一个非常强大的工具，可以用于绘制各种动态和静态的视觉效果。