注意

Question

我已经开始创建HTML5画布游戏。我在画布上有一个基本的html文档。我面临的问题是JavaScript。我有一个名为Pixels的对象，作为游戏的“控制器”。在该对象中，我有一个名为canvas的对象，该对象具有1个名为ctx的属性，该属性返回画布的ctx（我目前直接从document.getElementById("Pixels-Canvas").getContext("2d)获取。问题是：让我们假设我调用Pixels.canvas.ctx会返回画布的2d上下文，很简单。现在假设我调用Pixels.canvas。如何使该返回值document.getElementById("Pixels-Canvas")而不向画布中添加canvas属性canvas对象，像这样进行调用：Pixels.canvas.canvas？

我所拥有的：

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

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

我不想要的东西：

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

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

Pixels.canvas.canvas返回画布，但是canvas.canvas？丑。

注意

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

解决方案

我已经解决了自己的问题。有关详细信息，请参见下面的答案

Answer 1

这是怎么了？

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

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

Answer 2

我认为这是不可能的，并且对我来说也没有意义，因为如果其他人采用您的代码可能会造成混淆。最好的方法是为canvas指定canvas属性，为上下文指定canvasCtx或ctx。

Answer 3

您可以使用Pixels.canvas.ctx.canvas。

对getContext("2d")的调用返回一个CanvasRenderingContext2D，该canvas property引用了原始的画布元素。

也就是说，我同意Scott Marcus的建议。

Answer 4

我解决了自己的问题。

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

Pixels.canvas.ctx = Pixels.canvas.getContext("2d");

现在Pixels.canvas返回画布，而Pixels.canvas.ctx返回上下文！

如果未引用任何对象，则使对象返回特定属性

注意

解决方案

4 个答案: