2011-09-03 41 views
5

私はWebGLキャンバスを持っていると仮定します(getContext( "experimental-webgl")を呼び出して)。キャンバスコンテキストを切り替える

"2d"を使用するために後でコンテキストを切り替える方法はありますか?

このようなことの目的は、レンダリング中にエラーが発生したときにデバッグBSODのようなものを表示することです。その後、

それが不可能な場合は、:

  • は、私は(この最後のサイズが変更された場合でも)、キャンバスの上にHTML要素を埋め込むと、キャンバスそのまったく同じ同じを持っているために、この要素を強制することはできますか?
  • domノードを置き換えて、古いものについてのすべての参照を更新して、変更を反映させることはできますか?

[編集]これは現在の最小限のコールコードです。キャンバスは、WebGL APIで塗りつぶされたキャンバスを含むDOMノードであり、コールバックは単一のフレームを処理する関数です。

function failure(cvs, e) { 
    var ctx = cvs.getContext('2d'); // Fail here, returns `null' if cvs.getContext('webgl') has been called 
    ctx.fillStyle = 'rgb(0, 0, 0)'; 
    ctx.fillRect(0, 0, cvs.width, cvs.height); 
    ctx.fillStyle = 'rgb(255, 255, 255)'; 
    ctx.font = 'bold 12px sans-serif'; 
    ctx.fillText(e.toString(), 0, 0); 
} 

function foobar(canvas, callback) { 
    try { 
     callback(); 
    } catch (e) { 
     failure(canvas, e); 
     throw e; 
    } finally { 
     requestAnimationFrame(arguments.callee); 
    } 
} 
+0

実際のコードを掲載して、「はい」だけでなくこの質問に正しく答える方法を知ることができますか? –

+0

これで、コードの関連部分のみを保存しようとしました。 –

答えて

4

短い答えはほとんどない、スペックによれば。

すべてのキャンバスには、プライマリコンテキストと呼ばれるものがあります。これは、キャンバス上で呼び出される最初のコンテキストです。キャンバス上で非プライマリコンテキストを作ることは、さまざまなブラウザでいくつかのことをするかもしれませんが、決してそれに依存することは決してありません。

代わりに、最初のものの上にオーバーレイされ、同じ幅と高さの属性を保持する2番目のキャンバスがあります。私は1つを非表示にして、もう一方を非表示にします(または、見たい場合は2D表示を非表示にします)。

また、カンバスも保持するDIVの内側を中心に、単純にPNGを使用してください。言い換えれば、あなたはエラーが表示されるようにpngをしたいとき

Div container has black background and holds: 
    -PNG (centered) 
    -3D Canvas 

次に、あなただけの3Dキャンバスを非表示(および必要に応じてPNGを再表示)

+0

私はこのようなことをしました。しかし、キャンバスを「コンテキストなし」の状態にリセットする方法がないのは苦痛だと思います。これは必須の機能ではありませんが、いいですね。 –

1

ではなく2枚のキャンバスには、私が一緒に行ったソリューションを重ねてい既存のキャンバスをそれ自身のクローンで置き換えることでした。

var newCvs = cvs.cloneNode(false); 
cvs.parentNode.replaceChild(newCvs, cvs); 
cvs = newCvs; 

元のキャンバスのすべてのプロパティは保持されますが、コンテキストは自由に割り当てられて自由に割り当てられます。