Canvas按字母绘制文本：控制单个字母透明度并居中对齐

我懂你这个困扰！之前整段文字用strokeText绘制时，居中、换行啥的都顺得很，一旦拆成单个字母来控制透明度，各种对齐问题全冒出来了——别慌，咱们把这些坑一个个填上就行。

切换到单个字母绘制后，主要会碰到这几个关键点：

• 字母宽度差异：每个字母的宽度不一样（比如i和w），不能按均分来算位置，得逐个测量。
• 基线对齐：整词绘制时Canvas的基线作用于整个文本，单个字母得统一基线，不然会上下飘。
• 换行逻辑：得跟踪当前行的总宽度，超过Canvas边界时换行，还要保证换行后整行依然居中。
• 透明度隔离：每个字母的alpha得单独设置，还要避免影响后续绘制。

下面是一套包含所有需求的实现，直接就能用：

function drawStyledText(canvas, text, fontSize, fontFace, lineHeight = 1.2, alphaArray) {
    const ctx = canvas.getContext('2d');
    ctx.font = `${fontSize}px ${fontFace}`;
    ctx.textBaseline = 'middle'; // 垂直居中的关键基线设置
    ctx.lineWidth = 1; // 可根据需求调整描边粗细

    const canvasWidth = canvas.width;
    const maxLineWidth = canvasWidth - 40; // 留左右边距，可自定义
    const lineHeightPx = fontSize * lineHeight;
    const words = text.split(' ');

    // 第一步：把文本拆分成完整单词组成的行，避免单词被拆分
    const lines = [];
    let currentLine = [];
    let currentLineWidth = 0;

    for (const word of words) {
        const wordWidth = ctx.measureText(word).width;
        const spaceWidth = ctx.measureText(' ').width;
        const requiredWidth = currentLineWidth + (currentLine.length > 0 ? spaceWidth : 0) + wordWidth;

        if (requiredWidth > maxLineWidth && currentLine.length > 0) {
            lines.push({ words: [...currentLine], width: currentLineWidth });
            currentLine = [word];
            currentLineWidth = wordWidth;
        } else {
            currentLineWidth += currentLine.length > 0 ? spaceWidth : 0;
            currentLine.push(word);
            currentLineWidth += wordWidth;
        }
    }
    if (currentLine.length > 0) lines.push({ words: currentLine, width: currentLineWidth });

    // 第二步：计算整体垂直居中的起始位置
    const totalTextHeight = lines.length * lineHeightPx;
    let currentY = canvas.height / 2 - totalTextHeight / 2 + lineHeightPx / 2;

    // 第三步：逐行绘制，每行居中，每个字母独立控制透明度
    let alphaIdx = 0;
    for (const line of lines) {
        const lineOffsetX = (canvasWidth - line.width) / 2;
        let currentX = lineOffsetX;

        for (const word of line.words) {
            for (const letter of word) {
                const letterWidth = ctx.measureText(letter).width;
                const alpha = alphaArray[alphaIdx] || 1;

                // 隔离透明度设置，避免影响其他内容
                ctx.save();
                ctx.globalAlpha = alpha;
                ctx.strokeText(letter, currentX, currentY);
                ctx.restore();

                currentX += letterWidth;
                alphaIdx++;
            }
            // 绘制空格（非行末单词）
            if (line.words.indexOf(word) !== line.words.length - 1) {
                const spaceWidth = ctx.measureText(' ').width;
                ctx.strokeText(' ', currentX, currentY);
                currentX += spaceWidth;
                alphaIdx++; // 如果空格也需要透明度，保留这行；不需要就删掉
            }
        }
        currentY += lineHeightPx;
    }
}

// 使用示例
const canvas = document.getElementById('myCanvas');
canvas.width = 600;
canvas.height = 400;
const ctx = canvas.getContext('2d');

// 先画个白色背景
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 测试文本和透明度数组
const testText = 'Hello World! This is a demo of individual letter positioning with alpha transparency and auto line wrapping.';
const alphaArray = testText.split('').map((_, i) => 0.2 + (i % 12) * 0.06); // 渐变透明度效果

// 调用绘制函数
drawStyledText(canvas, testText, 24, 'Arial', 1.2, alphaArray);

1. 换行处理：先按单词拆分文本，确保不会把一个单词拆到两行，符合正常阅读习惯。
2. 整体居中：垂直方向通过计算文本总高度，从Canvas中心向上偏移一半高度实现；水平方向每行计算偏移量，保证整行居中。
3. 字母定位：逐个测量每个字母的宽度，实时更新X坐标，确保字母间距准确。
4. 透明度隔离：用save()和restore()包裹单个字母的绘制，避免当前透明度影响后续内容。

• 字母上下偏移：检查textBaseline是否设为middle，每行的Y坐标是否固定。
• 换行后不对齐：确认计算行宽度时包含了空格的宽度，偏移量是Canvas宽度与行宽的差值的一半。
• 透明度影响其他内容：一定要在每个字母绘制后调用restore()重置上下文状态。

内容的提问来源于stack exchange，提问作者webbist