Canvas使用strokeText绘制半透明描边文字重叠色深问题如何解决

问题本质原因：文字笔画交叉位置的描边路径存在重叠，半透明颜色在重叠区域被多次绘制叠加，最终呈现出色块更深的效果。

通用解决方案 #

• 方案1：离屏Canvas统一控制透明度（兼容性最优，支持所有支持Canvas的浏览器）
  核心思路是先把描边文字作为不透明整体绘制到临时离屏画布，再统一应用透明度绘制到主画布，从根本上避免局部颜色叠加：

// 主画布上下文
const mainCtx = canvas.getContext('2d');
const text = '你的文字内容';
const posX = 100, posY = 100;
const strokeOpacity = 0.3;

// 1. 初始化离屏Canvas，尺寸和主画布保持一致即可，也可按需缩小减少性能消耗
const offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = mainCtx.canvas.width;
offscreenCanvas.height = mainCtx.canvas.height;
const offscreenCtx = offscreenCanvas.getContext('2d');

// 2. 离屏画布上绘制不透明的描边文字 *注意同步字体设置
offscreenCtx.font = mainCtx.font;
offscreenCtx.strokeStyle = "rgb(0,0,0)"; 
offscreenCtx.lineWidth = 15;
offscreenCtx.lineJoin = "round";
offscreenCtx.strokeText(text, posX, posY);

// 3. 主画布统一应用透明度，绘制离屏内容
mainCtx.globalAlpha = strokeOpacity;
mainCtx.drawImage(offscreenCanvas, 0, 0);
mainCtx.globalAlpha = 1; // 绘制完成后恢复全局透明度，避免影响后续绘制逻辑

• 方案2：Path2D路径统一绘制（适合Chrome 98+等现代浏览器）
  利用新版Canvas支持的Path2D.addText接口提取文字整体路径后再描边，配合全局透明度控制也可避免叠加问题：

const ctx = canvas.getContext('2d');
const text = '你的文字内容';
const posX = 100, posY = 100;

// 加载字体完成后执行以下逻辑
const textPath = new Path2D();
textPath.addText(text, new FontFace('你的字体名称', '48px sans-serif'), posX, posY);

ctx.lineWidth = 15;
ctx.lineJoin = "round";
ctx.strokeStyle = "#000";
ctx.globalAlpha = 0.3;
ctx.stroke(textPath);
ctx.globalAlpha = 1;

• 额外注意事项：如果同时需要绘制文字填充，建议先绘制描边层，再绘制填充层，避免描边覆盖填充内容。

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