0

すべてを 1 つに描画するのではなく、複数のキャンバスを使用する方が効率的であると読んだので、これを試みているときに、コードを二重に書いていることに気付きました。そこで、すべての共通変数を含む関数を作成するというアイデアを得ました。コードは次のとおりです。

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 に答える