一、Canvas2D文字绘制的基础机制

Canvas2D通过CanvasRenderingContext2D接口提供文字绘制能力，核心API包括fillText()和strokeText()。前者用于填充文字，后者用于描边文字。两者均需指定文字内容、坐标位置及可选的最大宽度参数。

文字绘制的核心流程分为三步：

1. 获取绘图上下文：通过canvas.getContext('2d')获取2D渲染上下文。
2. 设置文字样式：使用font属性定义字体类型、大小及样式（如'bold 20px Arial'），textAlign和textBaseline控制对齐方式。
3. 执行绘制：调用fillText()或strokeText()完成渲染。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.fillStyle = 'blue';
ctx.fillText('Hello Canvas!', 50, 50);

font属性的格式需严格遵循CSS规范，例如'italic small-caps bold 24px "Microsoft YaHei"'。若未显式设置，默认使用10px sans-serif。

二、文字绘制的进阶技巧

1. 动态文字效果

通过结合measureText()方法，可实现动态文字布局。该方法返回TextMetrics对象，包含width属性，用于精确计算文字宽度。

const text = 'Dynamic Text';
ctx.font = '20px Arial';
const metrics = ctx.measureText(text);
ctx.fillText(text, (canvas.width - metrics.width) / 2, 50); // 水平居中

2. 文字描边与阴影

strokeText()需配合strokeStyle和lineWidth使用。阴影效果通过shadowColor、shadowBlur、shadowOffsetX/Y实现。

ctx.font = '40px Impact';
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.shadowColor = 'black';
ctx.shadowBlur = 10;
ctx.strokeText('Outline Text', 50, 100);

3. 多行文字处理

Canvas2D原生不支持自动换行，需手动分割文本或使用第三方库（如canvas-text-wrapper）。手动实现示例：

function drawMultilineText(ctx, text, x, y, maxWidth, lineHeight) {
    const words = text.split(' ');
    let line = '';
    let currentY = y;
    for (let i = 0; i < words.length; i++) {
        const testLine = line + words[i] + ' ';
        const metrics = ctx.measureText(testLine);
        if (metrics.width > maxWidth && i > 0) {
            ctx.fillText(line, x, currentY);
            line = words[i] + ' ';
            currentY += lineHeight;
        } else {
            line = testLine;
        }
    }
    ctx.fillText(line, x, currentY);
}

三、性能优化策略

1. 减少状态变更

频繁修改font、fillStyle等属性会导致重绘开销。建议批量处理相同样式的文字：

// 低效：每次循环都设置样式
for (let i = 0; i < 100; i++) {
    ctx.font = '20px Arial';
    ctx.fillText(`Item ${i}`, 10, 30 * i);
}
// 高效：先设置样式，再批量绘制
ctx.font = '20px Arial';
for (let i = 0; i < 100; i++) {
    ctx.fillText(`Item ${i}`, 10, 30 * i);
}

2. 离屏Canvas缓存

对静态文字（如UI元素）使用离屏Canvas预渲染，通过drawImage()复用：

const offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = 200;
offscreenCanvas.height = 50;
const offscreenCtx = offscreenCanvas.getContext('2d');
offscreenCtx.font = '30px Arial';
offscreenCtx.fillText('Cached Text', 10, 30);
// 主Canvas中绘制
ctx.drawImage(offscreenCanvas, 0, 0);

3. 避免透明度混合

半透明文字（globalAlpha < 1）会触发混合计算，影响性能。非必要情况下保持globalAlpha = 1。

四、跨平台兼容性处理

1. 字体回退机制

指定字体族时需提供备选方案，避免用户系统缺失字体：

ctx.font = '30px "Microsoft YaHei", Arial, sans-serif';

2. 像素比适配

高DPI设备需按window.devicePixelRatio缩放Canvas：

function setHighDPICanvas(canvas) {
    const dpr = window.devicePixelRatio || 1;
    canvas.style.width = canvas.width + 'px';
    canvas.style.height = canvas.height + 'px';
    canvas.width *= dpr;
    canvas.height *= dpr;
    canvas.getContext('2d').scale(dpr, dpr);
}

3. 浏览器差异处理

• Safari：部分版本对复杂字体支持不完善，需测试@font-face加载。
• Firefox：textBaseline: 'alphabetic'可能与其他浏览器不一致，建议统一使用'top'或'middle'。

五、实际应用场景与案例

1. 实时数据可视化

在图表中动态渲染数值标签，结合requestAnimationFrame实现流畅动画：

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const value = Math.sin(Date.now() / 1000) * 50 + 50;
    ctx.font = '20px Arial';
    ctx.fillText(`Value: ${value.toFixed(2)}`, 50, 50);
    requestAnimationFrame(animate);
}
animate();

2. 游戏UI系统

使用Canvas2D渲染游戏内的分数、对话框等文字元素，通过离屏Canvas优化频繁更新的HUD。

3. 动态海报生成

用户输入文字后，通过Canvas2D合成到背景图上，导出为图片：

function generatePoster(text) {
    const canvas = document.createElement('canvas');
    canvas.width = 800;
    canvas.height = 600;
    const ctx = canvas.getContext('2d');
    // 绘制背景
    ctx.fillStyle = '#f0f0f0';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    // 绘制文字
    ctx.font = 'bold 48px Arial';
    ctx.textAlign = 'center';
    ctx.fillText(text, canvas.width / 2, canvas.height / 2);
    // 导出为图片
    return canvas.toDataURL('image/png');
}

六、常见问题与解决方案

1. 文字模糊

原因：Canvas尺寸与显示尺寸不匹配。解决方案：按devicePixelRatio缩放（见第四部分）。

2. 中文乱码

原因：未指定中文字体或字体未加载。解决方案：在font属性中明确包含中文字体（如'Microsoft YaHei'），并确保字体已加载。

3. 性能瓶颈

症状：动画卡顿或滚动延迟。优化方向：

• 减少单帧绘制调用次数。
• 对静态文字使用离屏Canvas。
• 避免在fillText()中频繁修改样式。

七、总结与最佳实践

1. 样式集中管理：批量设置font、fillStyle等属性，减少状态变更。
2. 离屏Canvas复用：对重复使用的文字元素预渲染。
3. 动态内容优化：使用measureText()精确计算布局，避免重排。
4. 兼容性测试：在目标平台验证字体渲染效果。
5. 性能监控：通过console.time()测量关键路径耗时。

通过合理应用上述技巧，Canvas2D的文字绘制可兼顾视觉效果与运行效率，满足从简单标签到复杂动态文本的多样化需求。