Question

我读到使用多个画布而不是将所有内容绘制为一个更有效，所以在尝试这个时我注意到我正在编写代码为double。所以我想到了一个包含所有常见变量的函数。这是代码：

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元素比它应该的要小。如果要使画布在“正常”功能之外，则最终画布将为640x480px。但是，使用该功能创建元素时，尺寸要小得多。

关于为什么会发生这种情况或如何解决这个问题的任何想法？

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

Answer 1

您似乎没有实际为画布本身分配宽度或高度，只是为了包装它的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);
}

画布尺寸已关闭

1 个答案: