HTML 画布字体属性

在 HTML 画布中，可以使用字体属性来设置文本的字体、大小、样式和颜色。

font-family 属性

font-family 属性用于设置文本的字体类型，可以设置多个备用字体，如果第一个字体无法显示，则会尝试下一个备用字体。

示例代码：

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

  ctx.font = "30px Arial";
  ctx.fillText("Hello World", 10, 50);
</script>

该代码片段创建了一个画布，并在画布中绘制了一段文本 "Hello World"，字体为 Arial，大小为 30px。

font-size 属性

font-size 属性用于设置文本的字体大小。

示例代码：

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

  ctx.font = "italic 30px Arial";
  ctx.fillText("Hello World", 10, 50);
</script>

该代码片段创建了一个画布，并在画布中绘制了一段文本 "Hello World"，字体为 Arial，大小为 30px，并且将字体样式设置为斜体。

font-style 属性

font-style 属性用于设置文本的字体样式，可以设置为 normal（默认值）、italic（斜体）或 oblique（倾斜）。

示例代码：

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

  ctx.font = "italic 30px Arial";
  ctx.fillStyle = "red";
  ctx.fillText("Hello World", 10, 50);
</script>

该代码片段创建了一个画布，并在画布中绘制了一段红色的斜体文本 "Hello World"，字体为 Arial，大小为 30px。

font-weight 属性

font-weight 属性用于设置文本的字体粗细，可以设置为 normal（默认值）、bold（加粗）或 bolder（更加粗）。

示例代码：

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

  ctx.font = "30px Arial";
  ctx.fillStyle = "blue";
  ctx.fillText("Hello World", 10, 50);

  ctx.font = "bold 30px Arial";
  ctx.fillStyle = "red";
  ctx.fillText("Hello World", 10, 100);
</script>

该代码片段创建了一个画布，并在画布中绘制了两段文本 "Hello World"，字体为 Arial，大小为 30px。第一段文本为默认粗细，颜色为蓝色；第二段文本经过加粗，颜色为红色。

color 属性

color 属性用于设置文本的颜色。

示例代码：

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

  ctx.font = "30px Arial";
  ctx.fillStyle = "blue";
  ctx.fillText("Hello World", 10, 50);
</script>

该代码片段创建了一个画布，并在画布中绘制了一段蓝色的文本 "Hello World"，字体为 Arial，大小为 30px。

以上就是 HTML 画布字体属性的介绍，可以用它们来设置画布中的文本样式。