キャンバスに複数の四角形を描く

Question

なぜ私の四角形がキャンバスに描かれていないのか不思議でした。私は似たような投稿を見ましたが、自分のコードを修正できませんでした。

var squares = []; 
var ctx; 
function startGame() { 
    ctx = document.getElementById("myCanvas").getContext("2d"); 
    squares.push(drawStuff(75, 75, "red", 10, 10)); 
    squares.push(drawStuff(75, 75, "yellow", 50, 60)); 
    squares.push(drawStuff(75, 75, "blue", 10, 220)); 
    for (i=0;i<squares.length;i++){ 
     ctx.fillStyle = squares[i].color; 
     ctx.fillRect(squares[i].left,squares[i].top,squares[i].width,squares[i].height); 
    } 
} 
function drawStuff(width, height, color, x, y) { 
    var shape; 
    shape.left = x; 
    shape.top = y; 
    shape.width = width; 
    shape.height = height; 
    shape.color = color; 
    return shape; 
} 

Answer 1

もうすぐです！

は、あなたのコード内の問題のカップルを持っている：

• あなたは、そのコードを実行するstartGame（）を呼び出す必要があります。
• オブジェクトとしてshapeを定義する必要があります。var shape={}。

var squares = []; 
 
var ctx; 
 
startGame(); 
 
function startGame() { 
 
    ctx = document.getElementById("myCanvas").getContext("2d"); 
 
    squares.push(drawStuff(75, 75, "red", 10, 10)); 
 
    squares.push(drawStuff(75, 75, "yellow", 50, 60)); 
 
    squares.push(drawStuff(75, 75, "blue", 10, 220)); 
 
    for (i=0;i<squares.length;i++){ 
 
     ctx.fillStyle = squares[i].color; 
 
     ctx.fillRect(squares[i].left,squares[i].top,squares[i].width,squares[i].height); 
 
    } 
 
} 
 
function drawStuff(width, height, color, x, y) { 
 
    var shape={}; 
 
    shape.left = x; 
 
    shape.top = y; 
 
    shape.width = width; 
 
    shape.height = height; 
 
    shape.color = color; 
 
    return shape; 
 
}

<canvas id="myCanvas" width=300 height=300></canvas>