0

我读到使用多个画布而不是将所有内容绘制到一个画布上更有效，因此在尝试此操作时，我注意到我正在编写双重代码。所以我想到了制作一个包含所有公共变量的函数。这是代码：

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');

这就是问题所在：最终的画布元素比它应该的要小。如果要使功能之外的画布“正常”，那么最终的画布将是 640x480px。但是，当使用该函数创建元素时，尺寸要小得多。

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

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

4

1 回答 1

2

您似乎实际上并未将宽度或高度分配给画布本身，而只是将CanvasElement其包裹起来的对象。

试试这个：

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);
}
于 2012-10-06T14:40:20.513 回答