0

我正在学习 JavaScript，目前正在使用 html5 canvas api。由于我首先必须创建画布元素，然后获得 2d/3d 上下文（即 2 个未连接的变量），因此创建将这两者合并为一个的东西似乎是合乎逻辑的。

想法是拥有图形（gfx）对象（实际上是上下文对象）并且graphics.canvas它是对画布元素的引用，这样我就可以做类似的事情gfx.fillRect(0,0,150,75);，也许可以用gfx.canvas.width = x;等重新调整画布的大小......

当我尝试创建一个构造函数时，它并没有真正奏效，我想出了一个解决方案来返回context具有 as 属性的对象，canvas但我不确定这是否是正确的方法。

解决这个问题的最佳方法是什么？

这是我的代码：

function Canvas (context, width, height) {
    var canvas = document.createElement('canvas'),
    contex = canvas.getContext(context);

    this = contex; // <<-- Getting error here
    this.canvas = canvas;

    this.canvas.width = width;
    this.canvas.height = height;

    this.append = function () {
        document.body.appendChild(this.canvas);
    };
}

function Canvas2 (context, width, height) {
    var canvas = document.createElement('canvas'),
    contex = canvas.getContext(context);

    contex.canvas = canvas;

    contex.canvas.width = width;
    contex.canvas.height = height;

    contex.append = function () {
        document.body.appendChild(this.canvas);
    };

    return contex;
}

var gfx = new Canvas('2d', 400, 400),
gfx2 = Canvas2('2d', 400, 400);

gfx.append();
gfx2.append();
4

2 回答 2

5

this是 JavaScript 中的保留字，指的是只读的上下文变量。您不能重新分配它。

如果没有理由不能简单地继续使用该contex变量，那就这样做。如果您需要创建一个局部变量，则将其命名为其他名称：

var that = contex;
于 2013-04-08T20:45:40.823 回答
0

使用 ES2015 你可以做

Object.assign(this, contex)
于 2017-09-22T00:30:23.430 回答