HTML5 Canvas绘制斐波那契螺旋时出现多余半圆问题求解

问题原因 #

绘制圆弧时出现多余线段的核心问题出在arc()方法的参数配置上：

• CanvasRenderingContext2D.arc()的最后一个参数为true代表逆时针方向绘制弧线，你当前配置的角度区间在逆时针方向上对应的是270°的优弧，并非你需要的90°斐波那契螺旋四分之一劣弧。
• 你没有对direction的取值做循环限制，如果出现0-3之外的取值会触发无逻辑分支，也可能导致绘制异常。

修复方案 #

调整arc()的绘制方向为顺时针，同时补充朝向循环更新逻辑，修正后的代码如下：

function drawSpiral(side, start) {
  // 正方形绘制逻辑保持不变
  ctx.beginPath();
  ctx.moveTo(start.x, start.y);
  ctx.lineTo(start.x, start.y - side);
  ctx.lineTo(start.x - side, start.y - side);
  ctx.lineTo(start.x - side, start.y);
  ctx.lineTo(start.x, start.y);
  ctx.stroke();
  ctx.closePath();

  ctx.beginPath();
  switch (direction) {
    case 0:
      ctx.arc(start.x, start.y - side, side, Math.PI, 1.5 * Math.PI, false);
      break;
    case 1:
      ctx.arc(
        start.x - side,
        start.y - side,
        side,
        1.5 * Math.PI,
        2 * Math.PI,
        false
      );
      break;
    case 2:
      ctx.arc(start.x - side, start.y, side, 2 * Math.PI, Math.PI / 2, false);
      break;
    case 3:
      ctx.arc(start.x, start.y, side, Math.PI / 2, Math.PI, false);
      break;
  }
  ctx.stroke();
  ctx.closePath();
  // 新增朝向循环更新，避免取值超出0-3范围
  direction = (direction + 1) % 4;
}

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