Chuyển ngữ cảnh canvas

Question

Giả sử rằng tôi có canvas WebGL (bằng cách gọi getContext ("thí nghiệm-webgl")).

Có cách nào để chuyển ngữ cảnh sau này để sử dụng "2d" không?

Mục tiêu của việc như vậy sẽ là hiển thị lỗi gỡ lỗi BSOD khi xảy ra lỗi trong khi hiển thị.

Nếu đó là không thể, sau đó:

• Tôi có thể nhúng một yếu tố html trên một canvas, và buộc yếu tố này có giống hệt nhau giống như vải (ngay cả khi cuối cùng này được thay đổi kích cỡ)?
• Tôi có thể thay thế nút dom và cập nhật mọi tham chiếu về nút cũ để phản ánh thay đổi không?

[sửa] Đây là mã cuộc gọi tối thiểu hiện tại của tôi. Canvas là một nút DOM chứa canvas được lấp đầy bởi API WebGL và gọi lại là một hàm xử lý một khung duy nhất.

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

Answer 1

Câu trả lời ngắn gọn là khá nhiều, theo thông số kỹ thuật.

Mọi canvas đều có ngữ cảnh chính. Đây là ngữ cảnh đầu tiên được gọi trên canvas. Tạo bối cảnh không chính trên canvas có thể làm một số thứ trên các trình duyệt khác nhau nhưng tôi sẽ không bao giờ phụ thuộc vào nó.

Thay vào đó, tôi sẽ có canvas thứ hai được phủ lên đầu tiên và duy trì các thuộc tính chiều rộng và chiều cao giống nhau. Sau đó tôi sẽ ẩn một và bỏ ẩn khác (hoặc chỉ bỏ ẩn một 2D khi bạn muốn nó nhìn thấy).

HOẶC chỉ sử dụng PNG cho mục đích đơn giản., Được căn giữa bên trong một DIV cũng giữ canvas. Nói cách khác:

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

Sau đó, khi bạn muốn các lỗi png sẽ được hiển thị bạn chỉ cần ẩn vải 3D (và tùy chọn thôi ẩn các PNG)

Answer 2

Thay vì có hai bức tranh sơn dầu bao phủ, các giải pháp tôi đã đi với là thay thế canvas hiện có bằng bản sao của chính nó.

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

Tất cả các thuộc tính của canvas gốc sẽ được giữ lại nhưng ngữ cảnh sẽ được giải phóng để phân bổ như bạn muốn.