如何在HTML Canvas中为文本添加偏移轮廓并仅保留轮廓？

要去掉文本填充并实现偏移轮廓效果，分两种场景处理：

一、仅保留单一空心描边（无偏移） #

直接删掉原代码中负责填充的fillText相关逻辑即可，修改后的代码如下：

var canvas = /** @type {HTMLCanvasElement} */ (
    document.getElementById("myCanvas")
);
var ctx = canvas.getContext("2d");

// 绘制空心描边文本（无填充）
function drawTextWithOutline(
    text,
    x,
    y,
    outlineColor,
    outlineWidth
) {
    const font = "80px Dancing Script";
    ctx.font = font;
    ctx.strokeStyle = outlineColor;
    ctx.lineWidth = outlineWidth;
    ctx.lineJoin = "round";
    // 只保留描边逻辑，移除填充代码
    ctx.strokeText(text, x, y);
}

// 调用函数
drawTextWithOutline("Hello, World!", 50, 100, "blue", 20);

二、实现偏移扩散的轮廓效果 #

如果要做出文本轮廓向外偏移扩散的效果，需要通过多方向偏移描边叠加实现，修改后的代码如下：

var canvas = /** @type {HTMLCanvasElement} */ (
    document.getElementById("myCanvas")
);
var ctx = canvas.getContext("2d");

// 绘制偏移扩散的空心轮廓文本（无填充）
function drawTextWithOffsetOutline(
    text,
    x,
    y,
    outlineColor,
    outlineWidth,
    offset
) {
    const font = "80px Dancing Script";
    ctx.font = font;
    ctx.strokeStyle = outlineColor;
    ctx.lineWidth = outlineWidth;
    ctx.lineJoin = "round";
    
    // 定义8个方向的偏移量，叠加描边形成扩散轮廓
    const offsetPositions = [
        [-offset, -offset], [0, -offset], [offset, -offset],
        [-offset, 0],                    [offset, 0],
        [-offset, offset],  [0, offset], [offset, offset]
    ];
    
    // 遍历所有偏移位置描边
    offsetPositions.forEach(([dx, dy]) => {
        ctx.strokeText(text, x + dx, y + dy);
    });
}

// 调用函数：最后一个参数是偏移距离，可按需调整
drawTextWithOffsetOutline("Hello, World!", 50, 100, "blue", 3, 5);

关键说明 #

• 移除填充的核心就是删掉原代码中ctx.fillStyle = textColor;和ctx.fillText(text, x, y);这两行
• 偏移轮廓效果通过在文本的多个方向偏移位置重复描边实现，偏移距离和线条粗细都可以通过参数灵活调整

内容的提问来源于stack exchange，提问作者lei-san