6

私はいくつかの異なる方法でキャンバス要素を作成して実験してきましたが、これらの (または他の) 方法のどれが最も効率的かを誰かが知っているかどうか疑問に思っていました.

最も基本的なのは、キャンバス要素を次のように html に配置することです。

<canvas id="myCanvas" width="500", height="500"></canvas>

そしてJavaScriptで：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

すべてのキャンバス ビジネスを .js ファイルに保持する必要がある場合があります (要素の幅/高さを動的に変更する場合など)。次のようにします。

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.height = '500';
canvas.width = '500';
var ctx = canvas.getContext('2d');

または、怠け者になると、次のようになります。

document.write("<canvas id='myCanvas' width='500', height='500'></canvas>");

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

長所？短所？編集？その他のオプション？

4

2 に答える 2

6

最初のものは断然最高です。

2 番目と 3 番目のものはページを不必要に再レイアウトするため、最初のものは (わずかに) 効率性に優れています。また、後続の実行を停止するエラーが JavaScript にある場合、ページは非常に奇妙に見えます。

さらに、アクセシビリティの目的で常に最初のものを選択する必要があります。誰かが JavaScript を無効にしている場合でも、フォールバック コンテンツを表示する必要があります。「JavaScriptをオンにして！」と言うだけでも構いません。または「最新のブラウザを入手してください！」

2 番目または 3 番目の方法を使用する場合、ユーザーは決して気付かない可能性があり、フォールバック コンテンツ (またはキャンバス) があるはずの場所に奇妙なスペースがあるため、ページ レイアウトが苦手であると考え続けるだけです。

それを除けば、方法 2 と 3 は少し順序を乱します。いつキャンバスを追加しますか? onload火事の後？ページを起動onloadすることで、DOM がダンスを実行し、すべての準備が整ったことを示しました。そして、DOM を変更します。

...失礼ですね！

もちろん、onload2 つまたは 3 つを使用することで多少違反しているという暗黙の約束に依存するライブラリを使用することはおそらくないでしょうが、それを避けることができれば、それは不必要な規則の違反です。

ところで、簡単なアプリや例を始めるために、私はこのフィドルをブックマークしました:

http://jsfiddle.net/eAVMs/

最初の方法を使用します。canvas を頻繁に使用する場合は、このフィドルもブックマークする必要があります。

于 2012-06-16T03:17:25.520 に答える
1 
document.write("<canvas id='myCanvas' width='500', height='500'></canvas>");

Idが注意する唯一の方法です。使用document.writeは、一般的に、要素を任意に作成するための悪い習慣と見なされます。

ここで理由を繰り返すこともできますが、この答えはそれを十分に説明しています。

他の2つの方法は、完全に有効で問題ありません。それは本当に好みの問題です。何かをするために一時的なキャンバスが必要な場合を除いて、通常はキャンバスタグを作成します。この方法では、このcreateElementメソッドを使用します。

それ以外は、実際には好みの問題であり、全体的にパフォーマンスに影響を与えることはありません。

于 2012-06-16T02:35:32.627 に答える