Canvas 绘制文本并转换为 Base64 图片的实战方法
在实际开发中，有时候我们需要把一段文字直接变成图片格式，比如生成动态验证码或者避免加载外部字体资源。这时候 HTML5 的 Canvas 就派上用场了。它不仅能画图，还能把画好的内容直接导出成 Base64 字符串。
下面是一个完整的流程，重点在于如何让文字在画布上完美居中，以及如何安全地转换格式。
准备工作
首先确保页面上有一个 <canvas> 元素，并获取它的引用。设定好画布的宽高，这决定了最终图片的尺寸。
let width = 160;
let height = 90;
let x = 0;
let y = 0;
let font = '要绘制的文本';
let fontSize = 32;
let canvas = document.getElementById("canvas");
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext("2d");
绘制核心逻辑
拿到上下文后，先填充背景色，防止透明区域影响后续处理。接着是关键的文字对齐设置。很多人容易忽略 textAlign 和 textBaseline，如果不设这两个，文字默认是从左上角开始绘制的，很难控制位置。
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(x, y, width, height);
ctx.fillStyle = "#000000";
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = fontSize + 'px sans-serif';
这里要注意，textAlign 设为 center 后，x 坐标就是文字的中间点；同理 textBaseline 设为 middle，y 坐标对应文字的中心线。这样配合 fillText 就能轻松实现垂直水平双居中。
ctx.(font, width / , height / );
