Creé una forma y coloqué las variables del objeto en una matriz llamada allShapes, luego intenté ejecutar la función, pero parece que no aparece nada. Sé que el dibujo funciona, así que supongo que me estoy perdiendo algo. Aquí está todo mi código hasta ahora. (PD: para dibujar la forma, estoy usando las funciones "adelante" y "girar" para determinar la longitud y las direcciones de las líneas en la forma)
función para dibujar: forma1 nombre de la variable para la matriz: función allShapes para insertar variables de forma1 en la matriz: addObject
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(ox, oy); for (var i = 0; i < 13; i++) { turn(o, 60); forward(o, 50 + i * 5); ctx.lineTo(ox, oy); 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) { od = d; }; changeX = od * Math.cos(o.angle * oneDegree); changeY = od * Math.sin(o.angle * oneDegree); ox += changeX; oy += 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>Por favor, vea si esto ayuda a encontrar una solución. La forma ahora está renderizada.
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(ox, oy); for (let i = 0; i < 13; i++) { turn(o, 60); forward(o, 50 + i * 5); ctx.lineTo(ox, oy); 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) { od = d; }; changeX = od * Math.cos(o.angle * oneDegree); changeY = od * Math.sin(o.angle * oneDegree); ox += changeX; oy += 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>NOTAS
"addObject" ).let y const (en lugar de var )