搞定图片加文字：从源码看Canvas高频面试题
复制来的代码跑不通，报错提示“Canvas context is null”或者文字显示成乱码，你是不是也卡在这里？很多后端转全栈，或者准备前端高频面试题的开发者，都在图片处理这块栽过跟头。大家总觉得在图片上写字很简单，不就是 fillText 嘛，但真到生产环境里，涉及 DPI 适配、字体加载异步、跨域污染 Canvas 等坑时，瞬间就懵了。今天咱们不整虚的，直接扒开 HTML5 Canvas 的底层逻辑，看看浏览器引擎是怎么把像素点画上去的，顺便把那几个经典的面试坑给填了。
入口定位：Canvas 与 2D 上下文的交互
要搞懂怎样在图片上添加文字，得先知道数据流向。Canvas 本质上是一个 canvas DOM 元素，它本身没有绘图能力，必须通过 getContext('2d') 获取一个 CanvasRenderingContext2D 对象。这个对象才是真正干活的工人。
在浏览器内核（如 Chrome 的 Blink 或 Firefox 的 Gecko）中，Canvas 被实现为一个位图缓冲区。当你调用 drawImage 或 fillText 时，并不是直接在 DOM 树上打补丁，而是向这个缓冲区提交绘制指令。引擎会在后台线程进行光栅化（Rasterization），将矢量指令转换为像素颜色值。
这里有个关键细节：状态栈。Canvas 上下文维护了一个状态栈，包括当前路径、变换矩阵（Transform）、裁剪区域（Clip）、透明度（Alpha）等。每次 save() 会压栈，restore() 会弹栈。很多人代码跑不通，是因为忘记 save/restore，导致之前的旋转或透明度影响到了后面的文字绘制。
核心片段：Pillow 与 Canvas 的底层差异
虽然前端用 Canvas 居多，但后端常用 Python 的 Pillow 库。这里我们对比一下 Python Pillow 的 ImageDraw.text 实现，因为它的逻辑更清晰，且常出现在高频面试题中关于图像处理的算法题里。
假设我们要在一张 PNG 图片中心添加白色文字 Hello World，且字体为系统默认的 Arial。以下是 Python Pillow 的核心源码逻辑简化版（基于 PIL/ImageDraw.py 的逻辑抽象）：
# 语言: Python
# 核心逻辑：计算文本边界并绘制def draw_text(image, text, position, font, fill):# 1. 获取绘制上下文，绑定到图像对象draw = ImageDraw.Draw(image)# 2. 关键步骤：获取文本的边界框 (Bounding Box)# Pillow 内部调用 FreeType 库获取字形信息# 返回 (left, top, right, bottom)left, top, right, bottom = draw.textbbox(position, text, font=font)# 3. 计算中心点，用于居中显示# 注意：这里不能简单用 (right-left)/2，因为字体有偏移量width = right - leftheight = bottom - top# 4. 执行绘制# 这里底层会遍历字形的轮廓，进行反走样处理draw.text(position, text, font=font, fill=fill)逐行注释解析：ImageDraw.Draw(image)：这一步并非创建新图片，而是获取一个“画笔”对象，该对象持有对图像像素缓冲区的引用。
draw.textbbox(...)：这是最容易出错的地方。很多开发者以为文字宽度就是字符数乘以字体大小，大错特错。Pillow 内部通过 FreeType 获取每个字符的 Advance Width（前进宽度）和 Bearing（轴承位）。textbbox 返回的是实际占据的像素范围。
draw.text(...)：最终调用底层 C 扩展，将字体轮廓填充为指定颜色。再看前端 Canvas 的对应逻辑。虽然 JS 是单线程，但 Canvas 2D 上下文的 fillText 内部同样依赖系统字体引擎（如 macOS 的 Core Text 或 Windows 的 GDI+）。
// 语言: JavaScript
// 前端 Canvas 添加文字的核心调用const ctx = canvas.getContext('2d');
const text = Hello Canvas;
const fontSize = 20;
const fontFamily = Arial, sans-serif;// 1. 设置字体样式，必须包含大小、风格、族
ctx.font = `${fontSize}px ${fontFamily}`;// 2. 设置填充颜色
ctx.fillStyle = #ffffff;// 3. 设置文字对齐方式，这是定位的关键
ctx.textAlign = center;
ctx.textBaseline = middle;// 4. 执行绘制
// x, y 是文字的对齐点，而非左上角
ctx.fillText(text, canvas.width / 2, canvas.height / 2);逐行注释解析：ctx.font = ...：这是一个复合属性。设置它会触发字体加载（如果是 Web Font）。如果字体未加载完成就调用 fillText，浏览器会降级到默认字体，导致文字宽度计算错误，位置偏移。
ctx.textAlign 和 ctx.textBaseline：这两个属性决定了 (x, y) 坐标代表文字的哪个部分。默认是 left 和 alphabetic（基线）。面试常考：如何让文字在指定矩形内完全居中？答案就是设置 center 和 middle。
ctx.fillText：这是一个同步 API（在 UI 线程）。虽然渲染可能发生在后台，但 JS 执行流会等待字体光栅化准备好。设计思想：异步字体加载与重绘陷阱
这里必须提到一个高频面试题陷阱：动态加载字体后，Canvas 文字不更新。
很多开发者是这样写的：
// 错误示范
function drawWithWebFont() {const ctx = canvas.getContext('2d');ctx.font = 10px MyWebFont;ctx.fillText(Test, 10, 10); // 此时字体可能还没加载好
}// 加载字体
document.fonts.load(10px MyWebFont).then(() = {// 这里忘记重新绘制了！
});为什么跑不通？
因为 fillText 是即时光栅化。当第一次调用时，如果 MyWebFont 还在网络请求中，浏览器会使用 fallback 字体（如 Arial）进行渲染，并将像素写入缓冲区。一旦字体加载完成，Canvas 缓冲区里的像素已经固化了，它不会自动感知字体变化并重绘。
正确的设计思想：
Canvas 是一个“快照”机制，不是“实时绑定”机制。你必须确保在字体就绪后，重新执行绘制逻辑。
参考 MDN Web Docs 关于 FontFaceSet 的描述，现代浏览器提供了 document.fonts.ready Promise。
// 正确做法
async function drawRobustly() {// 1. 等待所有字体加载完成await document.fonts.ready;const ctx = canvas.getContext('2d');// 2. 清除画布，防止重叠ctx.clearRect(0, 0, canvas.width, canvas.height);// 3. 重新设置字体和绘制ctx.font = 10px MyWebFont;ctx.fillStyle = white;ctx.fillText(Test, 10, 10);
}这个设计思想的核心在于：解耦资源加载与渲染时机。在工程实践中，建议将绘制逻辑封装为纯函数 render(ctx, config)，然后在字体加载、图片加载、窗口 resize 等事件触发后，统一调用 render。
手写简化版：高性能文字水印生成器
结合前面的坑，我们手写一个简化版的图片水印生成器，适用于后端生成缩略图或前端实时预览。这里以 JavaScript 为例，模拟一个更健壮的实现。
/*** 在图片上添加文字水印* @param {HTMLImageElement} img - 已加载的图片对象* @param {string} text - 水印文字* @param {object} options - 配置项* @returns {HTMLCanvasElement} - 带有水印的 Canvas*/
function addWatermark(img, text, options = {}) {const {fontSize = 16,fontFamily = Arial,color = rgba(255,255,255,0.5),angle = -45,repeat = true} = options;// 1. 创建 Canvas，尺寸与图片一致const canvas = document.createElement('canvas');canvas.width = img.naturalWidth;canvas.height = img.naturalHeight;const ctx = canvas.getContext('2d');// 2. 绘制原图ctx.drawImage(img, 0, 0);// 3. 保存状态ctx.save();// 4. 设置字体ctx.font = `${fontSize}px ${fontFamily}`;ctx.fillStyle = color;ctx.textAlign = center;ctx.textBaseline = middle;// 5. 计算文字宽度，用于平铺计算const textWidth = ctx.measureText(text).width;const spacing = textWidth + 50; // 间距// 6. 旋转画布// 注意：旋转中心是 (0,0)，所以需要先平移ctx.translate(canvas.width / 2, canvas.height / 2);ctx.rotate(angle * Math.PI / 180);// 7. 平铺绘制if (repeat) {const maxRows = Math.ceil(canvas.height / (fontSize * 3));const maxCols = Math.ceil(canvas.width / spacing);for (let i = -maxRows; i maxRows; i++) {for (let j = -maxCols; j maxCols; j++) {const x = j * spacing;const y = i * (fontSize * 3);ctx.fillText(text, x, y);}}} else {// 单个居中ctx.fillText(text, 0, 0);}// 8. 恢复状态ctx.restore();return canvas;
}代码解析与避坑：img.naturalWidth：使用自然尺寸而非 CSS 显示尺寸，避免 DPI 不一致导致的模糊。
ctx.measureText(text)：这是获取文字实际宽度的唯一标准 API。不要自己估算。
ctx.translate + ctx.rotate：这是处理旋转文字的关键。如果直接 rotate，旋转中心是原点 (0,0)，也就是左上角，文字会飞出去。必须先 translate 到中心，再 rotate。
性能优化：如果水印文字很多，频繁调用 fillText 会消耗性能。在生产环境中，建议将水印预渲染到一个离屏 Canvas 上，然后作为图片 drawImage 到主画布上，这样可以复用光栅化结果。应用场景：从面试到生产
理解了这些底层逻辑，你就能应对各种高频面试题和实际业务场景。
场景一：前端图片预览器
用户上传图片，实时添加文字。痛点：字体加载慢，文字抖动。
解决：使用 document.fonts.ready 阻塞绘制，或使用 requestAnimationFrame 进行节流重绘。场景二：后端批量生成带水印的电商图片
使用 Python Pillow 或 Java Graphics2D。痛点：字体缺失导致乱码，内存溢出。
解决：在服务器预装字体，或使用 TTF 文件路径加载。注意使用 try-finally 释放图像资源。场景三：Canvas 导出为图片痛点：导出的图片文字模糊。
解决：设置 canvas.width = cssWidth * devicePixelRatio，并在 CSS 中设置 width: cssWidth。这是处理高分屏适配的标准方案，MDN Web Docs 中有详细记载。总结
在图片上添加文字，表面是 API 调用，底层是字体引擎、光栅化算法和状态管理的综合体现。状态管理：记得 save/restore。
字体异步：等待字体加载后再绘制，且需重绘。
坐标系统：理解 textAlign 和 textBaseline 对坐标的含义。
性能：复杂水印预渲染，简单水印直接绘制。这些知识点不仅是技术细节，更是区分初级和中级开发者的分水岭。当你下次遇到“复制来的代码跑不通”时，不妨检查一下是否踩中了上述任何一个坑。
还有什么不懂的？比如 Canvas 3D 的 WebGPU 支持，或者如何在 Node.js 环境下处理图片文字？评论区留言挨个回，咱们一起把这块硬骨头啃下来。
