原文： https://zetcode.com/gfx/html5canvas/text/

在 HTML5 画布教程的这一部分中，我们将处理文本。

文字和字体

字符是表示诸如字母，数字或标点符号之类的项目的符号。 字形是用于呈现字符或字符序列的形状。 在拉丁字母中，字形通常代表一个字符。 在其他书写系统中，一个字符可能由几个字形组成，例如ť，ž，ú，ô。 这些是带有重音符号的拉丁字符。

可以使用各种字体在画布上绘制文本。 字体是一组具有特定字体设计和大小的字体字符。 各种字体包括 Helvetica，Georgia，Times 或 Verdana。 具有特定样式的字形的集合形成字体面。 字体的集合构成字体家族。

绘制文字

HTML5 canvas上下文有两种绘制文本的方法：strokeText()和fillText()。 不同之处在于fillText()方法绘制文本的内部，而strokeText()方法绘制文本的轮廓。

drawing_text.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML5 canvas drawing text</title>
  5. <script>
  6.     function draw() {
  7.         var canvas = document.getElementById('myCanvas');
  8.         var ctx = canvas.getContext('2d');
  10.         ctx.font = "28px serif";
  11.         ctx.fillText("ZetCode", 15, 25);
  13.         ctx.font = "36px sans-serif";
  14.         ctx.strokeText("ZetCode", 30, 80);
  15.     }      
  16. </script>
  17. </head>
  19. <body onload="draw();">
  20.     <canvas id="myCanvas" width="200" height="150">     
  21.     </canvas>
  22. </body>
  23. </html>

该示例在画布上绘制两个字符串。

  1. ctx.font = "28px serif";

canvas上下文font属性指定绘制文本时使用的当前文本样式。 我们指定字体大小和字体系列。

  1. ctx.fillText("ZetCode", 15, 25);

fillText()方法的第一个参数是要渲染的文本。 接下来的两个参数是文本起点的 x 和 y 坐标。

HTML5 画布中的文字 - 图1

图：绘制文本

字形

在下面的示例中，我们演示了几种字体属性。

text_font.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML5 canvas drawing text</title>
  5. <script>
  6.     function draw() {
  7.         var canvas = document.getElementById('myCanvas');
  8.         var ctx = canvas.getContext('2d');
  10.         ctx.font = "normal bold 18px serif";
  11.         ctx.fillText('nice', 10, 20); 
  13.         ctx.font = "italic 18px serif";
  14.         ctx.fillText('pretty', 70, 20);
  16.         ctx.font = "small-caps bolder 18px serif";
  17.         ctx.fillText('beautiful', 160, 20);  
  18.     }      
  19. </script>
  20. </head>
  22. <body onload="draw();">
  23.     <canvas id="myCanvas" width="350" height="150">     
  24.     </canvas>
  25. </body>
  26. </html>

该示例绘制了三个具有不同字体样式，变体和粗细的单词。

  1. ctx.font = "normal bold 18px serif";

此行设置normal字体样式和bold字体粗细。

  1. ctx.font = "small-caps bolder 18px serif";

此行设置small-caps字体变体和bolder字体粗细。

HTML5 画布中的文字 - 图2

图：文本字体

文字基线

Canvas 2D API 的textBaseline属性指定在绘制文本时使用的当前文本基线。 它接受以下值：顶部，底部，中间，字母，悬挂，表意。 默认为字母。

text_baseline.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML5 canvas text baseline</title>
  5. <style>
  6.     canvas {border: 1px solid #bbbbbb}
  7. </style>    
  8. <script>
  9.     function draw() {
  10.         var canvas = document.getElementById('myCanvas');
  11.         var ctx = canvas.getContext('2d');
  13.         ctx.translate(0.5, 0.5);
  14.         ctx.setLineDash([2]);
  16.         ctx.fillStyle = 'gray';
  17.         ctx.lineWidth = 1;
  18.         ctx.beginPath();
  19.         ctx.moveTo(0, 100);
  20.         ctx.lineTo(canvas.width, 100);
  21.         ctx.stroke();
  23.         ctx.font = '20px serif';
  24.         ctx.textBaseline = "top";
  25.         ctx.fillText('Top', 5, 100); 
  27.         ctx.textBaseline = "bottom"; 
  28.         ctx.fillText('Bottom', 60, 100); 
  30.         ctx.textBaseline = "middle"; 
  31.         ctx.fillText('Middle', 150, 100); 
  33.         ctx.textBaseline = "alphabetic"; 
  34.         ctx.fillText('Alphabetic', 240, 100); 
  36.         ctx.textBaseline = "hanging"; 
  37.         ctx.fillText('Hanging', 360, 100); 
  39.         ctx.textBaseline = "ideographic";
  40.         ctx.fillText('Ideographic', 460, 100);
  42.     }    
  43. </script>
  44. </head>
  46. <body onload="draw();">
  47.     <canvas id="myCanvas" width="600" height="200">
  48.     </canvas>
  49. </body>
  50. </html>

该示例使用所有可用的文本基线绘制字符串。

  1. ctx.textBaseline = "top";
  2. ctx.fillText('Top', 5, 100);

这些行在顶部基线模式下绘制文本。

HTML5 画布中的文字 - 图3

图：文字基线

文字对齐

Canvas 2D API 的textAlign属性指定在绘制文本时使用的当前文本对齐方式。 对齐基于fillText()方法的 x 值。 可能的值为：左，右，居中，开始和结束。

text_alignment.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML5 canvas text alignment</title>
  5. <style>
  6.     canvas {border: 1px solid #bbbbbb}
  7. </style>    
  8. <script>
  9.     function draw() {
  10.         var canvas = document.getElementById('myCanvas');
  11.         var ctx = canvas.getContext('2d');
  13.         var cw = canvas.width/2;
  15.         ctx.fillStyle = 'gray';
  16.         ctx.translate(0.5, 0.5);
  17.         ctx.setLineDash([2]);
  19.         ctx.beginPath();
  20.         ctx.moveTo(cw, 0);
  21.         ctx.lineTo(cw, canvas.height);
  22.         ctx.stroke();
  24.         ctx.font = "16px serif";
  26.         ctx.textAlign = "center";
  27.         ctx.fillText("center", cw, 20);
  29.         ctx.textAlign = "start";
  30.         ctx.fillText("start", cw, 60);
  32.         ctx.textAlign = "end";
  33.         ctx.fillText("end", cw, 100);
  35.         ctx.textAlign = "left";
  36.         ctx.fillText("left", cw, 140);
  38.         ctx.textAlign = "right";
  39.         ctx.fillText("right", cw, 180);
  40.     }    
  41. </script>
  42. </head>
  44. <body onload="draw();">
  45.     <canvas id="myCanvas" width="350" height="200">
  46.     </canvas>
  47. </body>
  48. </html>

该示例使用所有可用的文本对齐方式绘制文本。

  1. var cw = canvas.width/2;

我们计算画布中间点的 x 坐标。 我们的文字围绕这一点对齐。

  1. ctx.beginPath();
  2. ctx.moveTo(cw, 0);
  3. ctx.lineTo(cw, canvas.height);
  4. ctx.stroke();

为了更好地视觉理解，我们在画布的中间绘制了一条细的垂直线。

  1. ctx.textAlign = "center";
  2. ctx.fillText("center", cw, 20);

这些线使文本水平居中。

HTML5 画布中的文字 - 图4

图：文本对齐

在 HTML5 画布教程的这一部分中，我们介绍了文本。