javascript - Canvas 尺寸已关闭

Question

我读到，使用多个 Canvas 而不是将所有内容都绘制到一个 Canvas 上会更有效，因此在尝试此操作时，我注意到我正在以双倍形式编写代码。所以我想到创建一个包含所有公共(public)变量的函数。代码如下:

function CanvasElement(id, width, height, parent){
     this.id = id;
     this.width = width;
     this.height = height;
     this.parent = parent;
     this.canvas = document.createElement('canvas');

     document.getElementById(parent).appendChild(this.canvas);
}

但是当我像这样使用这个函数时:

/*Parameters: id, width, height, parent element*/
var canvasBg = new CanvasElement('canvasBg', 640, 480, 'animation');

这就是问题所在:最终的 Canvas 元素比它应该的要小。如果要“正常”地将 Canvas 置于函数之外，那么最终的 Canvas 将为 640x480px。然而，当使用该函数创建元素时，尺寸要小得多。

关于为什么会发生这种情况或如何补救有什么想法吗？

我不想重写这些行来创建多个 Canvas 。我宁愿有一个可以创建的对象，并只在参数中给出属性。我还想知道我在如何实现这样的事情上是否走在正确的轨道上。非常感谢有关如何改进或在必要时应用不同方法来实现相同结果的建议。

Answer 1

您似乎并未实际将宽度或高度分配给 Canvas 本身，而只是将其包装的 CanvasElement 对象分配给 Canvas 。

试试这个:

function CanvasElement(id,width,height,parent) {
    this.canvas = document.createElement('canvas');
    this.canvas.id = id;
    this.canvas.width = width;
    this.canvas.height = height;
    document.getElementById(parent).appendChild(this.canvas);
}