异常教程

HTML canvas font 属性（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发中，HTML canvas font 属性是实现动态文本渲染的核心工具之一。它允许开发者通过 JavaScript 控制画布上文字的样式、颜色、对齐方式等属性，为游戏界面、数据可视化或交互式艺术创作提供了强大的文本渲染能力。对于编程初学者而言，掌握这一知识点不仅能提升对 canvas 的理解，还能解锁更多创意表达的可能性；而中级开发者则可以通过深入技巧实现复杂文本布局。本文将从基础概念到实战案例，逐步解析如何高效运用 canvas 的字体属性。

一、HTML Canvas Font 属性的基础概念

1.1 Canvas 是什么？

Canvas 是 HTML5 中用于动态绘制图形的元素，本质上是一个“画布”。开发者通过 JavaScript 的上下文（context）对象（如 ctx）向画布中添加形状、图像或文本。想象它就像一张空白的纸，而字体属性则是调整“笔触”和“墨水”的工具。

1.2 Font 属性的作用

Canvas 的 font 属性用于定义文本的样式，其语法格式为：

ctx.font = "font-style font-variant font-weight font-size font-family";

例如：

ctx.font = "italic bold 20px Arial";

这个语句设置了文字的斜体、加粗、20像素字号及使用 Arial 字体。

1.3 与 CSS 的对比

与 CSS 的 font 属性类似，但 canvas 的字体设置是直接作用于绘图上下文的，仅影响后续的文本绘制操作。这意味着每次修改 font 属性时，只有之后调用的 fillText() 或 strokeText() 会生效。

二、设置 Canvas Font 属性的步骤与案例

2.1 步骤一：获取 Canvas 上下文

在使用任何 canvas 功能前，必须先获取其 2D 上下文：

const canvas = document.getElementById("myCanvas");  
const ctx = canvas.getContext("2d");

2.2 步骤二：定义字体样式

通过 ctx.font 调整文本的外观：

案例 1：基础字体设置

ctx.font = "30px 'Comic Sans MS', cursive";  
ctx.fillText("Hello Canvas!", 10, 50);
  • 30px：定义文字大小；
  • 'Comic Sans MS'：指定字体名称；
  • cursive：备用字体，若主字体不可用时使用。

案例 2：添加样式修饰

ctx.font = "italic 24px Georgia";  
// 绘制斜体文字  
ctx.fillText("Italic Text", 10, 100);

此处 italic 使文字倾斜，Georgia 是一种衬线字体。

2.3 步骤三：颜色与填充/描边

通过 fillStyle 或 strokeStyle 设置文字颜色：

ctx.fillStyle = "#FF5733";  
ctx.fillText("Red Text", 10, 150);  

ctx.strokeStyle = "blue";  
ctx.lineWidth = 2;  
ctx.strokeText("Blue Outline", 10, 200);
  • fillText() 填充文字；
  • strokeText() 绘制文字边框。

三、进阶技巧：对齐与布局控制

3.1 文字基线对齐（textBaseline）

textBaseline 属性决定文字垂直方向的基准点，默认值为 alphabetic。例如：

ctx.textBaseline = "bottom";  
ctx.fillText("Bottom Align", 10, 250);

可用值包括 top、middle、bottom 等，适合对齐多行文本。

3.2 水平对齐（textAlign）

textAlign 控制文字水平方向的起始点，默认为 start（左对齐）。例如：

ctx.textAlign = "center";  
ctx.fillText("Centered Text", canvas.width / 2, 300);

结合 center 和 middle，可实现画布中心的精准对齐。

3.3 自定义字体加载

若需使用非标准字体，需先通过 @font-face 加载：

@font-face {  
  font-family: "MyCustomFont";  
  src: url("myfont.ttf");  
}

再在 JavaScript 中引用：

ctx.font = "40px 'MyCustomFont'";

四、常见问题与解决方案

4.1 字体未生效的排查

  • 字体名称拼写错误：确保字体名称与 CSS 中定义的一致，如 'Arial' 而非 Arial（无引号可能导致默认字体）。
  • 自定义字体未加载：检查字体文件路径是否正确，浏览器是否支持字体格式（如 TTF、WOFF）。

4.2 多语言文字支持

canvas 原生支持 Unicode，但需确保字体文件包含所需字符集。例如，使用中文字体时：

ctx.font = "24px 'Microsoft YaHei'";  
ctx.fillText("你好，Canvas！", 10, 350);

4.3 性能优化建议

  • 减少频繁修改字体属性：频繁切换 font 会降低渲染性能，建议将相同样式的文本批量绘制。
  • 使用离屏 canvas 缓存：对固定文本内容，可预先绘制到隐藏的 canvas，再通过 drawImage() 快速渲染。

五、实战案例：动态文本计分板

5.1 场景描述

设计一个简单的游戏计分板，实时显示分数并支持字体样式切换。

5.2 完整代码示例

<canvas id="scoreBoard" width="400" height="200"></canvas>  
<button onclick="changeFont()">切换字体</button>  

<script>  
  const canvas = document.getElementById("scoreBoard");  
  const ctx = canvas.getContext("2d");  
  let score = 0;  
  let currentFont = "24px Arial";  

  function drawScore() {  
    ctx.clearRect(0, 0, canvas.width, canvas.height);  
    ctx.font = currentFont;  
    ctx.fillStyle = "white";  
    ctx.textAlign = "center";  
    ctx.fillText(`Score: ${score}`, canvas.width / 2, 100);  
  }  

  function changeFont() {  
    currentFont = Math.random() > 0.5  
      ? "bold 30px Courier"  
      : "italic 28px Verdana";  
    drawScore();  
  }  

  // 模拟分数增加  
  setInterval(() => {  
    score += 10;  
    drawScore();  
  }, 1000);  
</script>

功能说明：

  • 点击按钮切换字体样式；
  • 每秒更新分数并重新绘制；
  • 使用 clearRect() 清除旧内容以避免重叠。

六、结论

通过本文的学习，开发者可以掌握 HTML canvas font 属性 的核心用法，包括基础设置、对齐控制、自定义字体加载及性能优化策略。无论是创建动态游戏界面、实时数据仪表盘，还是艺术化文字效果，canvas 的字体属性都能提供灵活且强大的支持。建议读者通过实际项目练习，例如开发文字游戏或交互式卡片生成器，进一步巩固对这一知识点的理解。随着实践的深入，还能探索更复杂的动画效果与文本布局，让 canvas 成为创意表达的得力工具。

最新发布

查看更多文章