Переключить контекст холста - PullRequest
Новая
       11

Переключить контекст холста

6 голосов
/ 03 сентября 2011

Предполагая, что у меня есть холст WebGL (вызывая getContext ("экспериментальный-webgl")).

Есть ли способ позже переключить контекст для использования "2d"?

Целью такой вещи было бы отображение отладочной BSOD-подобной ошибки при рендеринге.

Если это невозможно, то:

  • Могу ли я вставить HTML-элемент поверх холста и заставить этот элемент иметь то же самое, что и холст (даже если последний размер был изменен)?
  • Могу ли я заменить dom-узел и обновить каждую ссылку на старый, чтобы отразить изменение?

[редактировать] Это мой текущий минимальный код вызова. Canvas - это DOM-узел, содержащий canvas, который заполняется WebGL API, а обратный вызов - это функция, которая обрабатывает один кадр. 

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);
    }
}

Ответы [ 2 ]

4 голосов
/ 03 сентября 2011

Короткий ответ в значительной степени нет, согласно спецификации.

Каждый холст имеет то, что называется первичным контекстом. Это первый контекст, который вызывается на холсте. Создание неосновного контекста на холсте может делать некоторые вещи в разных браузерах, но я бы никогда от этого не зависел.

Вместо этого у меня будет второй холст, который накладывается поверх первого и поддерживает те же атрибуты ширины и высоты. Затем я бы спрятал одну и отобразил другую (или просто скрыл 2D, когда вы хотите, чтобы она была видна).

ИЛИ просто для удобства используйте PNG, центрированный внутри DIV, который также содержит холст. Другими словами: 

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

Затем, когда вы хотите, чтобы ошибка png отображалась, вы просто скрываете 3D-холст (и при желании можете показать PNG)

1 голос
/ 20 июля 2016

Вместо того, чтобы накладывать два холста, я решил заменить существующий холст своим клоном. 

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

Все свойства исходного холста будут сохранены, но контекст будетбыть свободным, чтобы распределить, как вы хотите.

...