Canvas分形树阴影模糊不均、线条粗细异常的问题求助

问题1：左侧分支线条偏粗、阴影过重 #

你的递归逻辑确实存在错误：处理"]"符号时，ctx.restore()已经恢复了"["时保存的画布状态（包括旋转角度），但你额外执行了ctx.rotate(Math.PI / 4)，这会导致角度错误叠加，最终让左侧分支被重复绘制多次，造成线条变粗、阴影叠加变重的效果。

问题2：独立路径后阴影效果消失 #

当你把beginPath()移入递归后，每条分支成为独立路径，阴影本该正常生效，但因为问题1的画布状态混乱才导致异常。修复问题1后，阴影就能正常显示。

修复后的完整代码 #

generateFractal(ctx, grammar, sentence, branchSize) {
    ctx.translate(canvas.width / 2, canvas.height);
    ctx.shadowColor = "teal";
    ctx.shadowBlur = 14;
    const drawRecursive = (ctx, sentence, idx, branchSize) => {
      if (idx === sentence.length) return;
      if (sentence[idx] === "1" || sentence[idx] === "0") {
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(0, -branchSize);
        ctx.stroke();
        ctx.translate(0, -branchSize);
        // 单线段不需要closePath，否则会产生多余的闭合连线
      } else if (sentence[idx] === "[") {
        ctx.save();
        ctx.rotate(-Math.PI / 4);
      } else if (sentence[idx] === "]") {
        ctx.restore();
        // 移除错误的额外旋转操作
      }
      drawRecursive(ctx, sentence, idx + 1, branchSize);
    };
    drawRecursive(ctx, sentence, 0, branchSize);
  }

核心修复说明 #

• 删除"]"后的多余旋转：ctx.restore()会直接回退到分支保存的初始画布状态，手动旋转会导致角度偏移，重复绘制同一路径。
• 移除不必要的closePath()：单条线段不需要闭合路径，否则会自动连接起点和终点，出现多余线条。
• 阴影效果自动恢复：修复状态错误后，每条独立路径的stroke()都会应用你预先设置的阴影参数，阴影效果自然正常显示。

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