异常教程

HTML canvas fillText() 方法（一文讲透）

更新时间:

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

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

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

前言：走进 HTML Canvas 的文本渲染世界

在前端开发中，HTML Canvas 是一个功能强大的画布元素，允许开发者通过 JavaScript 动态生成图像、图表和动画。其中，fillText() 方法作为 Canvas API 的核心功能之一，能够将文本绘制到画布上，是实现文字效果、游戏文字提示、动态数据展示等场景的重要工具。无论是编程初学者还是中级开发者，掌握 fillText() 方法的使用方法与技巧，都能显著提升 Canvas 开发的效率。

本文将从基础语法开始，逐步深入讲解 fillText() 方法的参数设置、样式控制、文本对齐、性能优化等知识点，并通过实际案例演示其应用场景。通过循序渐进的讲解，帮助读者从零构建对 Canvas 文本渲染的完整认知。

基础语法：用 fillText() 在画布上“写”文字

fillText() 方法的语法相对简单，但其参数的灵活组合能实现丰富的效果。其基本语法如下：

context.fillText(text, x, y, [maxWidth]);
  • text：要绘制的文本内容，可以是字符串或数字。
  • x 和 y：定义文本左下角的坐标位置，单位为像素。
  • maxWidth（可选）：限制文本的宽度，超出部分会被截断。

初体验：绘制第一段文字

以下是一个简单的示例，展示如何在画布上绘制“Hello World!”：

<canvas id="myCanvas" width="200" height="100"></canvas>  
<script>  
  const canvas = document.getElementById("myCanvas");  
  const context = canvas.getContext("2d");  
  context.fillText("Hello World!", 10, 50);  
</script>

在上述代码中，我们通过 getContext("2d") 获取 Canvas 的绘图上下文，然后调用 fillText() 将文本绘制在坐标（10, 50）的位置。

样式控制：让文字“穿”上个性化的“衣服”

fillText() 的默认样式可能无法满足实际需求，开发者可以通过调整 Canvas 的样式属性，为文本添加颜色、字体、阴影等效果。

1. 设置字体与颜色

通过 font 和 fillStyle 属性，可以改变文本的字体和颜色：

// 设置字体为 24px 的 Arial 字体  
context.font = "24px Arial";  
// 设置文本颜色为红色  
context.fillStyle = "red";  
context.fillText("Styled Text", 10, 50);
  • font：遵循 CSS 字体语法，如 font-size font-family。
  • fillStyle：支持十六进制、RGB、颜色名称等格式。

2. 添加文本阴影

使用 shadowColor、shadowBlur 等属性，可以为文本添加阴影效果：

context.shadowColor = "rgba(0, 0, 0, 0.5)";  
context.shadowBlur = 10;  
context.shadowOffsetX = 5;  
context.shadowOffsetY = 5;  
context.fillText("Shadow Text", 10, 80);

这些属性共同作用，能模拟文本在画布上的立体感。

文本对齐与位置控制：让文字“站”得更精准

在 Canvas 中，文本的默认对齐方式是左下角对齐，但实际开发中可能需要居中或右对齐。

计算文本宽度：测量文字的“身材”

通过 measureText() 方法，可以获取文本的宽度，进而计算居中坐标：

const textWidth = context.measureText("Centered Text").width;  
const centerX = (canvas.width - textWidth) / 2;  
context.fillText("Centered Text", centerX, 50);

这段代码首先测量文本的宽度，然后通过画布宽度减去文本宽度，得到居中的起始位置。

调整基线与对齐方式

  • textBaseline：定义文本的垂直对齐方式，可选值包括 top、middle、bottom 等。
  • textAlign：定义文本的水平对齐方式，可选值包括 start、center、end。
// 垂直居中对齐  
context.textBaseline = "middle";  
// 水平居中对齐  
context.textAlign = "center";  
context.fillText("Aligned Text", canvas.width / 2, canvas.height / 2);

高级技巧：让文字“动”起来

fillText() 结合其他 Canvas 方法，可以实现动态效果，例如旋转文本或文字动画。

旋转文字：给文字“转个弯”

通过 rotate() 方法，可以将文本旋转指定角度：

context.save(); // 保存当前画布状态  
context.rotate(45 * Math.PI / 180); // 旋转 45 度  
context.fillText("Rotated Text", 50, 50);  
context.restore(); // 恢复画布状态

注意：旋转后坐标系会变化，需调整 x 和 y 的位置。

动态文本效果：文字随时间变化

使用 requestAnimationFrame() 可以创建文字的动态效果，例如颜色渐变或位置移动：

function animateText() {  
  context.clearRect(0, 0, canvas.width, canvas.height);  
  context.fillStyle = `hsl(${Date.now() % 360}, 50%, 50%)`; // 颜色随时间变化  
  context.fillText("Animated Text", 10, 50);  
  requestAnimationFrame(animateText);  
}  
animateText();

性能优化：让 fillText() 运行得更“快”

频繁调用 fillText() 可能导致性能问题，尤其在绘制大量文本时。以下方法可提升渲染效率：

减少重绘次数

将多次绘制操作合并到一个函数中，避免频繁调用 clearRect() 和 fillText()。

使用离屏 Canvas 预渲染

对静态文本进行预渲染，减少主画布的计算开销：

const offscreenCanvas = document.createElement("canvas");  
const offContext = offscreenCanvas.getContext("2d");  
offContext.fillText("Static Text", 10, 20);  
// 在主画布上绘制离屏 Canvas  
context.drawImage(offscreenCanvas, 0, 0);

常见问题与解决方案

问题 1：文字显示为“空白”

原因：可能未正确获取 Canvas 上下文或坐标超出画布范围。
解决：检查 getContext("2d") 是否成功，确认 x 和 y 在画布可视区域内。

问题 2：文本样式未生效

原因：样式设置可能被后续代码覆盖，或未在 fillText() 前声明。
解决：确保样式属性设置在调用 fillText() 之前。

结论：填满你的 Canvas，从 fillText() 开始

HTML Canvas fillText() 方法不仅是文本渲染的起点，更是实现创意交互和动态效果的基石。通过掌握其基础语法、样式控制、对齐技巧和性能优化方法，开发者可以将静态画布转化为充满活力的视觉表达工具。无论是为游戏添加分数提示，还是为数据可视化添加标签，fillText() 都能提供灵活且强大的支持。

鼓励读者动手实践：尝试将本文的代码示例复制到本地，调整参数观察效果变化，并探索更多 Canvas API 的组合使用场景。记住，实践是掌握技术的最佳途径，而 fillText() 只是 Canvas 世界中的一块跳板，等待你进一步探索更广阔的图形编程领域。

最新发布

查看更多文章