如何调试分形树？答案

【问题标题】：How to debug fractal tree?如何调试分形树？
【发布时间】：2019-04-19 23:54:13
【问题描述】：

我需要帮助调试我的代码。

我有一个 AP 考试的创建任务。我尝试提示“未定义”的 ctx、角度、len 和 arc，因为它无法识别这些。

var ctx = prompt("Please enter a number between -360 and 360");
var branchWidth = prompt ("Please enter a number between one and ten");
var len = prompt ("Please enter any number between 0 and 20");
var angle = ctx;
function start() 
function draw(startX, startY, len, angle) {
  ctx.beginPath();
  ctx.save();
  ctx.translate(startX, startY);
  ctx.rotate(angle * Math.PI / 180);
  ctx.moveTo(0, 0);
  ctx.lineTo(0, -len);
  ctx.stroke();
  if (len < 10) {
    ctx.restore();
    return;
  }
  draw(0, -len, len * 0.8, -15);
  draw(0, -len, len * 0.8, 15);
  ctx.restore();
}
ctx.lineWidth = branchWidth;
ctx.strokeStyle = "rgb(rand";
ctx.fillStyle = "green";
if (len < 10) {
  ctx.beginPath();
  ctx.arc(0, -len, 10, 0, Math.PI / 2);
  ctx.fill();
  ctx.restore();
  return;
}
draw(0, -len, len * 0.8, angle + 10, branchWidth * 0.8);
draw(0, -len, len * 0.8, angle - 10, branchWidth * 0.8);
ctx.shadowBlur = 15;
ctx.shadowColor = "rgba(0,0,0,0.8)";
if (angle > 0) {
  ctx.bezierCurveTo(10, -len / 2, 10, -len / 2, 0, -len);
} else {
  ctx.bezierCurveTo(-10, -len / 2, -10, -len / 2, 0, -len);
}

start();

预期的程序运行但得到了结果：错误：第 8 行：SyntaxError: Unexpected token (8:0)

【问题讨论】：

好吧，我只想说第 8 行仍然不适合我。
function start() 那行应该做什么？这不是正确的 javascript，分形树是无关紧要的

标签： javascript debugging html5-canvas fractals

【解决方案1】：

我可以让它为你运行，但没有解释我无法让它正常工作

var angle = prompt("Please enter a number between -360 and 360");
var branchWidth = prompt ("Please enter a number between one and ten");
var len = prompt ("Please enter any number between 0 and 20");
const ctx = document.getElementById("canvas").getContext("2d");
function draw(startX, startY, len, angle) {
  ctx.beginPath();
  ctx.save();
  ctx.translate(startX, startY);
  ctx.rotate(angle * Math.PI / 180);
  ctx.moveTo(0, 0);
  ctx.lineTo(0, -len);
  ctx.stroke();
  if (len < 10) {
    ctx.restore();
    return;
  }
  draw(0, -len, len * 0.8, -15);
  draw(0, -len, len * 0.8, 15);
  ctx.restore();
}
function start() {
  ctx.lineWidth = branchWidth;
  ctx.strokeStyle = "rgb(rand";
  ctx.fillStyle = "green";
  if (len < 10) {
    ctx.beginPath();
    ctx.arc(0, -len, 10, 0, Math.PI / 2);
    ctx.fill();
    ctx.restore();
    return;
  }
  draw(0, -len, len * 0.8, angle + 10, branchWidth * 0.8);
  draw(0, -len, len * 0.8, angle - 10, branchWidth * 0.8);
  ctx.shadowBlur = 15;
  ctx.shadowColor = "rgba(0,0,0,0.8)";
  if (angle > 0) {
    ctx.bezierCurveTo(10, -len / 2, 10, -len / 2, 0, -len);
  } else {
    ctx.bezierCurveTo(-10, -len / 2, -10, -len / 2, 0, -len);
  }
}
start();

&lt;canvas id="canvas" width=1000 height=1000&gt;&lt;/canvas&gt;

【讨论】：

typeError ctx.beginPath 不是函数