如何调试分形树?

时间:2019-04-19 23:54:14

标签: javascript debugging html5-canvas fractals

我需要调试代码的帮助。

我有一份AP考试的创建任务。我尝试给“未定义”的ctx,angle,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:语法错误:意外的令牌(8:0)

1 个答案:

答案 0 :(得分:0)

我可以让它为您运行,但没有解释,我就无法使其正常运行

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();
<canvas id="canvas" width=1000 height=1000></canvas>