Canvas 设置文字样式：从初学者到高手，一次掌握

2023-11-08 21:35:03

Canvas 文字样式设置：从入门到精通

探索 Canvas 的文字表现力

Canvas 作为一门强大的图形绘制工具，不仅限于绘制形状和线条，更能为文字增添无限创意。掌握 Canvas 的文字样式设置，让你的文字在画布上大放异彩，提升画作的视觉效果。

1. 字体设置：定义文字的个性

字体是文字风格的核心，它决定了文字呈现出的视觉感受。Canvas 提供了丰富的字体选项，使用 font 属性进行设置，如：

ctx.font = "30px Arial"; // 设置字体为 Arial，字体大小为 30 像素

2. 字号设置：掌控文字大小

字号决定了文字在画布上的大小，使用 fontSize 属性进行设置，如：

ctx.fontSize = "20px"; // 设置字号为 20 像素

3. 颜色设置：赋予文字色彩

文字的颜色由 fillStyle 属性控制，如：

ctx.fillStyle = "red"; // 设置文字颜色为红色

4. 对齐设置：定位文字位置

对齐决定了文字在画布上的水平位置，可以使用 textAlign 属性进行设置，如：

ctx.textAlign = "center"; // 将文字居中对齐

5. 旋转设置：为文字增添动感

旋转可以为文字增添动态效果，使用 rotate 属性进行设置，如：

ctx.rotate(Math.PI / 4); // 将文字旋转 45 度

示例代码：实践 Canvas 文字样式

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <canvas id="myCanvas" width="500" height="300"></canvas>

    <script>
      var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");

      // 设置文字样式
      ctx.font = "30px Arial";
      ctx.fillStyle = "red";
      ctx.textAlign = "center";
      ctx.rotate(Math.PI / 4);

      // 绘制文字
      ctx.fillText("Hello World", 250, 150);
    </script>
  </body>
</html>