javascript - 如果没有引用，则使对象返回特定属性

Question

我已经开始创建 HTML5 Canvas 游戏。我有一个带有 Canvas 的基本 html 文档。我面临的问题是 JavaScript。我有一个名为 Pixels 的对象作为游戏的“ Controller ”。在该对象中，我有一个名为 canvas 的对象，它有 1 个名为 ctx 的属性，该属性返回 Canvas 的 ctx(我目前直接从 document.txt 获取该属性)。 getElementById("Pixels-Canvas").getContext("2d)。问题是:假设我调用 Pixels.canvas.ctx 它将返回 Canvas 的 2d 上下文，很简单.现在假设我调用Pixels.canvas。如何使其返回document.getElementById("Pixels-Canvas")，而不向 Canvas 对象添加canvas属性，进行如下调用:Pixels.canvas.canvas?

我有:

var Pixels =
{
  canvas:
  { 
    ctx:
    document.getElementById("Pixels-Canvas").getContext("2d")
  }
};

Pixels.canvas 这不是我想要的，因为它没有给我 Canvas 本身

<小时/>

我不想要什么:

var Pixels =
{
  canvas:
  {
    canvas:
    document.getElementById("Pixels-Canvas"),

    ctx:
    document.getElementById("Pixels-Canvas").getContext("2d")
  }
};

Pixels.canvas.canvas 返回 Canvas ，但是canvas.canvas？丑陋。

注意

我认为到目前为止我一直被误解。我想要的是调用 Pixels.canvas 返回 Canvas ，并 Pixels.canvas.ctx 返回 Canvas 的 ctx。

<小时/>

解决方案

我已经解决了我自己的问题。详情请参阅下面我的回答

Answer 1

这有什么问题吗？:

var Pixels = {
  canvas: document.getElementById("Pixels-Canvas"),
  ctx: this.getContext("2d")
};

然后，您可以使用 Pixels.canvas 获取实际的 canvas DOM 元素，并使用 Pixels.ctx 获取上下文。