HTML5框架Canvas怎么添加文字_text方法绘制技巧【操作】_技术教程

Canvas 文字绘制仅支持 fillText() 和 strokeText() 两种方法，需手动处理对齐、字体语法、测量与换行；文字定位以基线为基准，居中推荐 textAlign='center' + textBaseline='middle'。

Canvas 的 `fillText` 和 `strokeText` 是唯二可用的文字绘制方法

HTML5 Canvas 没有 text() 或 drawText() 这类方法，更不存在 _text 这样的私有或非标 API。所有文字渲染必须通过 fillText()（实心字）或 strokeText()（描边字）完成。试图调用不存在的 _text 会直接报 TypeError: ctx._text is not a function。

这两个方法签名一致：ctx.fillText(text, x, y [, maxWidth])，其中 maxWidth 是可选参数，用于自动缩放或截断超长文本。

文字对齐和基线经常导致定位“偏移”，必须手动校准

Canvas 文字默认以 x 为水平起点、y 为**文字基线（baseline）位置**，不是顶部也不是中心——这和 CSS 直觉相反。常见表现是：明明设了 y = 50，文字却“飘”在 canvas 上方或沉到底部。

ctx.textAlign = 'center' 控制水平对齐（'left' / 'center' / 'right'）
ctx.textBaseline = 'middle' 控制垂直对齐（'top' / 'hanging' / 'middle' / 'alphabetic' / 'bottom'）
最稳妥的居中组合是：textAlign = 'center' + textBaseline = 'middle'，此时 (x, y) 就是文字视觉中心点

字体设置必须用完整 CSS 字体语法，且不支持 font-weight 数值

ctx.font 接受类似 CSS 的字符串，但有硬性限制：不能只写 '16px sans-serif' 就完事，必须包含字号、行高（可省略）、字体族；同时 font-weight 只认关键字（'bold'、'normal'），不识别 '600' 或 700 这类数字值，否则整条 font 设置失效，回退到浏览器默认字体（通常是 10px sans-serif）。

正确写法示例：

ctx.font = 'bold 18px "Helvetica Neue", sans-serif';
ctx.font = 'normal 14px monospace';
// ❌ 错误：数字 weight、缺少字号、引号不匹配
// ctx.font = '600 14px Arial';
// ctx.font = '14px Arial';
// ctx.font = 'bold 14px "Arial';

文字测量和换行需手动实现，Canvas 原生不支持自动折行

当需要显示多行或适配容器宽度时，ctx.measureText(text) 返回 { width }，但仅针对单行。换行逻辑必须自己写：切分空格/标点、逐词累加宽度、超过阈值则换行。

简单按空格分词+贪心换行的最小可行逻辑：

function wrapText(ctx, text, maxWidth) {
  const words = text.split(' ');
  let lines = [];
  let currentLine = '';
for (let word of words) {
const testLine = currentLine + (currentLine ? ' ' : '') + word;
const metrics = ctx.measureText(testLine);
if (metrics.width <= maxWidth) {
currentLine = testLine;
} else {
if (currentLine) lines.push(currentLine);
currentLine = word;
}
}
if (currentLine) lines.push(currentLine);
return lines;
}
// 使用：
const lines = wrapText(ctx, 'Hello world this is long text', 200);
lines.forEach((line, i) => {
ctx.fillText(line, 100, 50 + i * 24); // 行高 24px
});

注意：中文等无空格语言需改用字符级遍历，且要考虑 ctx.font 实际加载状态——若字体未就绪，measureText 可能返回异常小的宽度。

Canvas 文字本质是像素绘制，没有 DOM 文本的排版能力。所有“看起来该有的功能”——比如自动换行、颜色渐变填充、阴影模糊、RTL 支持——都得靠组合 shadowColor、createLinearGradient、手动拆解 Unicode 区段等手段补全。别指望它像 那样省心。