将p5.js的LSystems代码转HTML Canvas原生JS时遇渲染问题

你的核心问题出在p5.js与原生Canvas绘图状态管理、坐标变换逻辑的差异上，以下是具体的修复点：

1. 严格对应p5的push/pop → 原生Canvas的save/restore #

p5的push()和pop()会自动保存/恢复绘图状态（坐标系、旋转、样式等），原生Canvas没有这个自动机制，你必须手动用ctx.save()和ctx.restore()包裹每一段变换代码，否则坐标系会混乱，树枝会被画到画布外或者被后续绘制覆盖。

比如p5中的分支逻辑：

push();
rotate(theta);
branch(len*0.67);
pop();

必须转成：

ctx.save(); // 保存当前坐标系状态
ctx.rotate(theta); // 注意：theta必须是弧度，p5默认用弧度，原生也是
branch(ctx, len*0.67, theta);
ctx.restore(); // 恢复到旋转前的状态

2. 坐标变换的顺序不能错 #

p5中translate和rotate的顺序直接决定了坐标系的变化，原生Canvas完全遵循相同的顺序逻辑：

• 先移动坐标系到树枝末端（ctx.translate(0, -len)），再进行旋转
• 如果顺序颠倒，旋转会基于原始原点，树枝会偏移到不可见区域

正确的分支绘制逻辑示例：

function branch(ctx, len, theta) {
  // 绘制当前树枝
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(0, -len);
  ctx.stroke();

  // 树枝长度足够时继续分叉
  if (len > 4) {
    ctx.save();
    ctx.translate(0, -len); // 移动到树枝末端
    // 右分支
    ctx.save();
    ctx.rotate(theta);
    branch(ctx, len * 0.67, theta);
    ctx.restore();
    // 左分支
    ctx.save();
    ctx.rotate(-theta);
    branch(ctx, len * 0.67, theta);
    ctx.restore();
    ctx.restore();
  } else {
    // 绘制花朵
    buildFlower(ctx);
  }
}

3. 原生Canvas绘制线条必须走完整路径流程 #

p5的line()是封装好的方法，原生Canvas需要手动启动路径：

• 先调用ctx.beginPath()
• 用moveTo()设置起点，lineTo()设置终点
• 最后调用ctx.stroke()完成绘制

如果跳过beginPath()，所有线条会被合并成一条路径，可能导致树枝无法正确显示。

4. 初始化时的坐标系设置 #

在调用分支函数前，需要把坐标系移动到画布底部中心（和p5的初始绘制位置对应）：

const canvas = document.getElementById('your-canvas-id');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 设置初始位置：画布底部中心
ctx.translate(canvas.width / 2, canvas.height);
// 设置线条样式（可选，确保可见）
ctx.lineWidth = 2;
ctx.strokeStyle = '#333';

// 启动分支，theta用弧度（比如30度转弧度：Math.PI/6）
branch(ctx, 100, Math.PI/6);

5. 角度单位校验 #

如果你的angle变量是角度值（比如30），必须转换成弧度再传给ctx.rotate()，因为原生Canvas的rotate只接受弧度：

const angleInRadians = angle * Math.PI / 180;
ctx.rotate(angleInRadians);

按照以上步骤调整后，分形树应该能正常显示，不会被buildFlower()的矩形覆盖。

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