微信登录

矢量图形 - 文本元素 - 文本的样式设置

前端 - HTML5 《矢量图形 - 文本元素 - 文本的样式设置》

在 HTML5 中，我们可以使用 <canvas> 元素来绘制矢量图形，其中文本元素的样式设置为页面增添了丰富的表现力。下面我们将深入探讨如何在 HTML5 的 <canvas> 中设置文本的样式。

1. 基本的文本绘制

在开始设置文本样式之前，我们先了解如何在 <canvas> 上绘制基本的文本。以下是一个简单的示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Canvas Text Example</title>
  8. </head>
  10. <body>
  11.     <canvas id="myCanvas" width="400" height="200"></canvas>
  12.     <script>
  13.         const canvas = document.getElementById('myCanvas');
  14.         const ctx = canvas.getContext('2d');
  15.         ctx.font = '30px Arial';
  16.         ctx.fillText('Hello, Canvas!', 50, 100);
  17.     </script>
  18. </body>
  20. </html>

在上述代码中，我们首先获取了 <canvas> 元素和 2D 绘图上下文。然后，通过 ctx.font 属性设置了文本的字体和大小，最后使用 ctx.fillText() 方法在指定位置绘制了文本。

2. 文本样式设置

2.1 字体设置

font 属性用于设置文本的字体样式，其语法与 CSS 中的 font 属性类似。以下是一些常见的字体设置示例：

  1. // 设置字体为 20px 的宋体
  2. ctx.font = '20px SimSun';
  3. // 设置字体为 24px 的粗体 Arial
  4. ctx.font = 'bold 24px Arial';
  5. // 设置字体为 18px 的斜体 Verdana
  6. ctx.font = 'italic 18px Verdana';

2.2 文本颜色设置

使用 fillStyle 属性可以设置文本的填充颜色，使用 strokeStyle 属性可以设置文本的描边颜色。示例如下：

  1. // 设置文本填充颜色为红色
  2. ctx.fillStyle = 'red';
  3. ctx.fillText('Red Text', 50, 50);
  5. // 设置文本描边颜色为蓝色
  6. ctx.strokeStyle = 'blue';
  7. ctx.strokeText('Blue Stroke Text', 50, 100);

2.3 文本对齐方式设置

textAlign 属性用于设置文本的水平对齐方式，textBaseline 属性用于设置文本的垂直对齐方式。常见的取值如下：
| 属性 | 取值 | 描述 |
| —— | —— | —— |
| textAlign | start、end、left、right、center | 水平对齐方式 |
| textBaseline | top、hanging、middle、alphabetic、ideographic、bottom | 垂直对齐方式 |

示例代码：

  1. ctx.font = '20px Arial';
  2. ctx.textAlign = 'center';
  3. ctx.textBaseline = 'middle';
  4. ctx.fillText('Centered Text', canvas.width / 2, canvas.height / 2);

2.4 文本阴影设置

可以使用 shadowColor、shadowBlur、shadowOffsetX 和 shadowOffsetY 属性来设置文本的阴影效果。示例如下：

  1. ctx.shadowColor = 'gray';
  2. ctx.shadowBlur = 10;
  3. ctx.shadowOffsetX = 5;
  4. ctx.shadowOffsetY = 5;
  5. ctx.fillStyle = 'black';
  6. ctx.fillText('Text with Shadow', 50, 100);

3. 完整示例

下面是一个综合运用上述文本样式设置的完整示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Canvas Text Style Example</title>
  8. </head>
  10. <body>
  11.     <canvas id="myCanvas" width="400" height="300"></canvas>
  12.     <script>
  13.         const canvas = document.getElementById('myCanvas');
  14.         const ctx = canvas.getContext('2d');
  16.         // 设置字体
  17.         ctx.font = 'bold 24px Arial';
  19.         // 设置文本填充颜色
  20.         ctx.fillStyle = 'green';
  21.         ctx.fillText('Green Text', 50, 50);
  23.         // 设置文本描边颜色
  24.         ctx.strokeStyle = 'purple';
  25.         ctx.strokeText('Purple Stroke Text', 50, 100);
  27.         // 设置文本对齐方式
  28.         ctx.textAlign = 'center';
  29.         ctx.textBaseline = 'middle';
  30.         ctx.fillStyle = 'orange';
  31.         ctx.fillText('Centered Orange Text', canvas.width / 2, canvas.height / 2);
  33.         // 设置文本阴影
  34.         ctx.shadowColor = 'gray';
  35.         ctx.shadowBlur = 10;
  36.         ctx.shadowOffsetX = 5;
  37.         ctx.shadowOffsetY = 5;
  38.         ctx.fillStyle = 'brown';
  39.         ctx.fillText('Text with Shadow', 50, 250);
  40.     </script>
  41. </body>
  43. </html>

通过上述示例，我们可以看到在 HTML5 的 <canvas> 中，我们可以轻松地设置文本的各种样式，为页面添加丰富的视觉效果。希望本文能帮助你更好地掌握 HTML5 中矢量图形文本元素的样式设置。

矢量图形 - 文本元素 - 文本的样式设置