HTML5画布中的文本
最后修改于 2023 年 7 月 17 日
在HTML5画布教程的这一部分，我们处理文本。
文本和字体
字符是表示字母、数字或标点符号等项目的符号。字形是用于渲染字符或字符序列的形状。在拉丁字母中，一个字形通常代表一个字符。在其他书写系统中，一个字符可能由多个字形组成，例如 ť、ž、ú、ô。这些是带重音符号的拉丁字符。
可以使用各种字体在画布上绘制文本。字体是具有特定字体设计和大小的一组字符类型。各种字体包括 Helvetica、Georgia、Times 或 Verdana。具有特定样式的字形集合形成一个字面。字面集合形成一个字体系列。
绘制文本
HTML5画布上下文有两个绘制文本的方法：strokeText 和 fillText。区别在于fillText方法绘制文本的内部，而strokeText方法绘制文本的轮廓。
<!DOCTYPE html>
<html>
<head>
<title>HTML5 canvas drawing text</title>
<script>
function draw() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.font = "28px serif";
ctx.fillText("ZetCode", 15, 25);
ctx.font = "36px sans-serif";
ctx.strokeText("ZetCode", 30, 80);
}
</script>
</head>
<body onload="draw();">
<canvas id="myCanvas" width="200" height="150">
</canvas>
</body>
</html>
该示例在画布上绘制了两行文本。
ctx.font = "28px serif";
画布上下文的font属性指定了绘制文本时使用的当前文本样式。我们指定字体大小和字体系列。
ctx.fillText("ZetCode", 15, 25);
fillText方法的第一个参数是要渲染的文本。接下来的两个参数是文本起点的x和y坐标。
字体
在下面的示例中，我们演示了几个字体属性。
<!DOCTYPE html>
<html>
<head>
<title>HTML5 canvas drawing text</title>
<script>
function draw() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.font = "normal bold 18px serif";
ctx.fillText('nice', 10, 20);
ctx.font = "italic 18px serif";
ctx.fillText('pretty', 70, 20);
ctx.font = "small-caps bolder 18px serif";
ctx.fillText('beautiful', 160, 20);
}
</script>
</head>
<body onload="draw();">
<canvas id="myCanvas" width="350" height="150">
</canvas>
</body>
</html>
该示例绘制了三种具有不同字体样式、变体和粗细的单词。
ctx.font = "normal bold 18px serif";
此行设置了normal字体样式和bold字体粗细。
ctx.font = "small-caps bolder 18px serif";
此行设置了small-caps字体变体和bolder字体粗细。
文本基线
画布2D API的textBaseline属性指定了绘制文本时使用的当前文本基线。它接受以下值：top、bottom、middle、alphabetic、hanging、ideographic。默认值为alphabetic。
<!DOCTYPE html>
<html>
<head>
<title>HTML5 canvas text baseline</title>
<style>
canvas {border: 1px solid #bbbbbb}
</style>
<script>
function draw() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.translate(0.5, 0.5);
ctx.setLineDash([2]);
ctx.fillStyle = 'gray';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(canvas.width, 100);
ctx.stroke();
ctx.font = '20px serif';
ctx.textBaseline = "top";
ctx.fillText('Top', 5, 100);
ctx.textBaseline = "bottom";
ctx.fillText('Bottom', 60, 100);
ctx.textBaseline = "middle";
ctx.fillText('Middle', 150, 100);
ctx.textBaseline = "alphabetic";
ctx.fillText('Alphabetic', 240, 100);
ctx.textBaseline = "hanging";
ctx.fillText('Hanging', 360, 100);
ctx.textBaseline = "ideographic";
ctx.fillText('Ideographic', 460, 100);
}
</script>
</head>
<body onload="draw();">
<canvas id="myCanvas" width="600" height="200">
</canvas>
</body>
</html>
该示例使用所有可用的文本基线绘制文本。
ctx.textBaseline = "top";
ctx.fillText('Top', 5, 100);
这些行以顶部基线模式绘制文本。
文本对齐
Canvas 2D API的textAlign属性指定了绘制文本时使用的当前文本对齐方式。对齐方式基于fillText方法的x值。可能的值包括：left、right、center、start和end。
<!DOCTYPE html>
<html>
<head>
<title>HTML5 canvas text alignment</title>
<style>
canvas {border: 1px solid #bbbbbb}
</style>
<script>
function draw() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var cw = canvas.width/2;
ctx.fillStyle = 'gray';
ctx.translate(0.5, 0.5);
ctx.setLineDash([2]);
ctx.beginPath();
ctx.moveTo(cw, 0);
ctx.lineTo(cw, canvas.height);
ctx.stroke();
ctx.font = "16px serif";
ctx.textAlign = "center";
ctx.fillText("center", cw, 20);
ctx.textAlign = "start";
ctx.fillText("start", cw, 60);
ctx.textAlign = "end";
ctx.fillText("end", cw, 100);
ctx.textAlign = "left";
ctx.fillText("left", cw, 140);
ctx.textAlign = "right";
ctx.fillText("right", cw, 180);
}
</script>
</head>
<body onload="draw();">
<canvas id="myCanvas" width="350" height="200">
</canvas>
</body>
</html>
该示例绘制了应用了所有可用文本对齐方式的文本。
var cw = canvas.width/2;
我们计算画布中间点的x坐标。我们的文本围绕该点对齐。
ctx.beginPath(); ctx.moveTo(cw, 0); ctx.lineTo(cw, canvas.height); ctx.stroke();
为了更好地视觉理解，我们在画布中间绘制了一条细垂直线。
ctx.textAlign = "center";
ctx.fillText("center", cw, 20);
这些行将文本水平居中。
在HTML5画布教程的这一部分，我们介绍了文本。