javascript - 带有方法的 JS 对象文字缺少什么？

Question

我正在尝试创建一个简单的对象文字，其中包含一个方法，在本例中是 Canvas 上的一个移动 block 。我使用 http://www.html5rocks.com 上的教程编写了以下代码

var block = {
    color: "#000000",
    x: 0,
    y: 0,
    width: 30,
    height: 30,
    draw: function () {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
};

function update() {
    block.x = block.x + 30;
    block.y = block.y + 30;
}

function draw() {
    var x = document.getElementById("space");
    var ctx = x.getContext("2d");

    ctx.clearRect(0, 0, 900, 600);

    block.draw();
}

出于某种原因，它不会像这样工作，但如果我现在在 draw() 函数的 draw 方法中编写代码，它就会工作。我可能遗漏了什么，但是什么？

Answer 1

block 及其成员从未听说过 ctx，它在您的 draw() 函数中是本地的。

要么将其设为全局，要么将其传递给 block.draw:

var block = {
  // ...

  draw: function(ctx) { 
    // ...
  }
};

// ...

block.draw(ctx);