2011-09-03 15 views
5

Zakładając, że mam płótno WebGL (przez wywołanie getContext ("experimental-webgl")).Przełącz kontekst płótna

Czy istnieje jakiś sposób na zmianę kontekstu później w przypadku używania "2d"?

Celem takiego działania byłoby wyświetlanie debugowania w stylu BSOD, gdy wystąpi błąd podczas renderowania.

Jeśli nie jest to możliwe, a następnie:

  • mogę osadzić element HTML na płótnie, i zmusić ten element, aby mieć dokładnie takie same same, że płótno (nawet jeśli ten ostatni jest zmieniany)?
  • Czy mogę zastąpić węzeł dom i zaktualizować każdą referencję o starej, aby odzwierciedlić zmianę?

[edytuj] To jest mój obecny minimalny kod wywoławczy. Canvas to węzeł DOM zawierający obszar roboczy, który jest wypełniany przez interfejs API WebGL, a wywołanie zwrotne to funkcja przetwarzająca pojedynczą ramkę.

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

Czy możesz zamieścić jakiś aktualny kod, aby uzyskać prawidłowy sposób odpowiedzi na to pytanie, a nie tylko odpowiedź "tak"? –

+0

Tak się stało, próbowałem zachować tylko odpowiednie części kodu. –

Odpowiedz

4

Krótka odpowiedź brzmi prawie nie, zgodnie ze specyfikacją.

Każde płótno ma tak zwany kontekst podstawowy. Jest to pierwszy kontekst przywoływany na płótnie. Tworzenie kontekstu innego niż podstawowy na kanwie może sprawiać pewne rzeczy w różnych przeglądarkach, ale nigdy, przenigdy nie będę na tym polegać.

Zamiast tego miałbym drugie płótno, które jest nakładane na pierwsze i zachowuje te same atrybuty szerokości i wysokości. Chciałbym ukryć jeden i odkryć drugiego (lub po prostu odkryć 2D, kiedy chcesz go zobaczyć).

LUB po prostu użyj PNG dla uproszczenia., Wyśrodkowany wewnątrz DIV, który również trzyma płótno. Innymi słowy:

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

Potem, gdy chcesz błąd ma być wyświetlany po prostu ukryć płótnie 3D (i ewentualnie odkryć PNG)

+0

Zrobiłem coś takiego. Ale myślę, że to jest ból, że nie ma sposobu, aby zresetować płótno do stanu "bez kontekstu". To nie jest funkcja obowiązkowa, ale byłoby miło. –

1

Zamiast mieć dwa płótna nakładanie, rozwiązanie poszedłem z png miało zastąpić istniejące płótno klonem samym w sobie.

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

wszystkie właściwości oryginalnego płótna zostaną zachowane, ale z kontekstu nie zostanie zwolniona do przydzielenia, jak chcesz.