将变量推入数组以绘制形状，但没有显示

Question

我已经创建了一个形状，我已经把对象的变量推到一个名为allShapes的数组中，然后我尝试执行该函数，但什么也没有出现。我知道画得很好，所以我猜我遗漏了什么?这是到目前为止我的所有代码。(注:为了绘制形状，我使用了函数"forward"one_answers";turn"在形状

中确定线的长度和方向。绘图功能:shape1数组的变量名:allShapesaddObject

var canvas;
var ctx;
var w = 1000;
var h = 600;
var allShapes = [];
setUpCanvas();
for (var i = 0; i < allShapes.length; i++) {
shape1(allShapes[i]);
}
function addObject(a) {
a.push({
"x": w / 2,
"y": h / 2,
"w": 50,
"h": 30,
"d": 5,
"angle": 0,
"changle": 15,
"c": 180,
})
}
function shape1(o) {
ctx.beginPath();
ctx.moveTo(o.x, o.y);
for (var i = 0; i < 13; i++) {
turn(o, 60);
forward(o, 50 + i * 5);
ctx.lineTo(o.x, o.y);
ctx.stroke();
}
}
function turn(o, angle) {
if (angle != undefined) {
o.changle = angle;
};
o.angle += o.changle;
}
function forward(o, d) {
var changeX;
var changeY;
var oneDegree = Math.PI / 180;
if (d != undefined) {
o.d = d;
};
changeX = o.d * Math.cos(o.angle * oneDegree);
changeY = o.d * Math.sin(o.angle * oneDegree);
o.x += changeX;
o.y += changeY;
}
//// GENERAL STUFF 
function randn(r) {
var result = Math.random() * r - r / 2;
return result
}
function randi(r) {
var result = Math.floor(Math.random() * r);
return result
}
function rand(r) {
return Math.random() * r
}
function setUpCanvas() {
canvas = document.querySelector("#myCanvas");
ctx = canvas.getContext("2d");
canvas.width = w;
canvas.height = h;
canvas.style.border = "5px solid orange";
}
console.log("Assignment 3");

<div>
<canvas id="myCanvas">
</canvas>
</div>

Answer 1

请看看这是否有助于找到解决方案。现在可以渲染形状了。

let canvas, ctx;
const w = 400, h = 250; // reduced dimensions to fit demo-window
// const w = 1000, h = 600; 
const allShapes = [];
setUpCanvas();
for (var i = 0; i < allShapes.length; i++) {
shape1(allShapes[i]);
};
function addObject(a) {
a.push({
"x": w / 2,
"y": h / 2,
"w": 50,
"h": 30,
"d": 5,
"angle": 0,
"changle": 15,
"c": 180,
})
}
function shape1(o) {
ctx.beginPath();
ctx.moveTo(o.x, o.y);
for (let i = 0; i < 13; i++) {
turn(o, 60);
forward(o, 50 + i * 5);
ctx.lineTo(o.x, o.y);
ctx.stroke();
}
}
function turn(o, angle) {
if (angle != undefined) {
o.changle = angle;
};
o.angle += o.changle;
}
function forward(o, d) {
let changeX, changeY, oneDegree = Math.PI / 180;
if (d != undefined) {
o.d = d;
};
changeX = o.d * Math.cos(o.angle * oneDegree);
changeY = o.d * Math.sin(o.angle * oneDegree);
o.x += changeX;
o.y += changeY;
}
//// GENERAL STUFF 
function randn(r) { return Math.random() * r - r / 2; };
function randi(r) { return Math.floor(Math.random() * r); };
function rand(r) { return Math.random() * r; };
function setUpCanvas() {
canvas = document.querySelector("#myCanvas");
ctx = canvas.getContext("2d");
canvas.width = w;
canvas.height = h;
canvas.style.border = "5px solid orange";
// invoked the "addObject" function with empty "allShapes" array
addObject(allShapes);
}
console.log("Assignment 3");

<div>
<canvas id="myCanvas">
</canvas>
</div>

指出

1. 新增一行"addObject"方法调用
2. 在可能的情况下，优先使用let和const(代替var)